Почему first-of-type и [href$=] не взаимодействуют вместе?
Есть список с позициями, которых может быть произвольное количество, но первый и последний при этом совпадают по ссылке.
Мне нужно добиться того, чтобы у первого элемента была иконка, а у последнего многоточие. Пытаюсь крутиться через first-of-type, last-of-type, [href$= ], но что-то не выходит..
Нарушать структуру html при этом нельзя.
div a:first-of-type[href$=sdfsdf]:before {
content: "\f19c";
font-size: 12px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
}
div a:last-of-type[href$=sdfsdf]:before {
content: "...";
font-size: 12px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
<p><a href="/sdfsdf">List 1</a></p>
<p><a href="/vcbcvbf">List 2</a></p>
<p><a href="/ert">List 3</a></p>
<p><a href="/oplll">List 4</a></p>
<p><a href="/sdfsdf">List 5</a></p>
</div>Элементы в вашем примере не имеют общего родителя, поэтому каждая ссылка в вашем примере является и первой и последней в своем родителе и срабатывание селектора происходит чисто по условию [href$=sdfsdf]
Если точно известно, что нужны именно первый и последний элементы, можно попробовать так:
div p:first-of-type a[href$=sdfsdf]:before {
content: "\f19c";
font-size: 12px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
}
div p:last-of-type a[href$=sdfsdf]:before {
content: "...";
font-size: 12px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
<p><a href="/sdfsdf">List 1</a></p>
<p><a href="/vcbcvbf">List 2</a></p>
<p><a href="/ert">List 3</a></p>
<p><a href="/oplll">List 4</a></p>
<p><a href="/sdfsdf">List 5</a></p>
</div>В целом, в таком случае, можно и фильтр [href$=sdfsdf] опустить.
Уточнение
Элементы из примера, конечно, имеют общего родителя div, но при этом они не являются соседними (они не siblings).
То есть, в дереве DOMа у них есть общий родитель, но они не на одной и той же ветке, т.к. у них у каждого своя ветка p.
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
- Почему SERVER_ADDR имеет не тот IP 47563 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30496 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23632 visits
- Как через css изменить цвет png изображения? 10350 visits
- Blob video url download 9958 visits
- Php curl запрос через прокси с авторизацией 9210 visits
- Работа с captcha vk api 8094 visits
© "hostciti.net" 25.11.2024 | 08:40