Как с помощью css выделить первый пункт меню у которого есть дополнительный класс?

Question

[Дмитрий]

Здравствуйте.

Как с помощью css выделить первый пункт меню у которого есть дополнительный класс?

то есть из двух и более элементов с классами .li.some надо выделить только первый.

Ссылка на codepen

Спасибо

Comments

[Сергей Горячев]

https://codepen.io/anon/pen/eEKvoX
Ну, если знать его место примерно, то можно через nth-child.
Если примерно понимать, что он может быть только в 1-5 пунктах, можно написать условие для nth-child.
Тогда пересекаться не будет с другими li списка.

Answer 1

[Максим Тимофеев]

так не получится, псевдоэлемент вычисляет первый li у родителя. Так что или js или как-то иначе. :first-of-type не поможет
Грубо говоря он по селектору находит элемент, потом ищет родителя, а потом берет первый элемент и применяет стиль, но так как у Вас указан еще и .some то не применяется, попробуйте добавить к первому элементу .some и он окрасится.
А вот с jQuery попроще:
https://codepen.io/wokster/pen/brKWEK

Answer 2

[Вадим Кот]

Такая задача решается либо с помощью jQuery, либо vanilla js
Вот варианты: https://codepen.io/anon/pen/eEKWWO