Почему 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.
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
-
20:41
-
06:31
- Почему SERVER_ADDR имеет не тот IP 50163 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31921 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26128 visits
- Как через css изменить цвет png изображения? 11740 visits
- Blob video url download 11286 visits
- Php curl запрос через прокси с авторизацией 10694 visits
- Работа с captcha vk api 9488 visits
© "hostciti.net" 09.2.2026 | 17:10