2

Есть список с позициями, которых может быть произвольное количество, но первый и последний при этом совпадают по ссылке.

Мне нужно добиться того, чтобы у первого элемента была иконка, а у последнего многоточие. Пытаюсь крутиться через 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>

0

1 ответ 1

3

Элементы в вашем примере не имеют общего родителя, поэтому каждая ссылка в вашем примере является и первой и последней в своем родителе и срабатывание селектора происходит чисто по условию [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.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.