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