:nth-child() of .class

Общее
1

Подскажите, пожалуйста, каким селектором можно выбрать n-ые элементы с определённым классом?
Допустим, как выбрать 1-ый и 3-ый элемент с классом “yellow” (yellow-1 и yellow-3) из следующего списка:

<ul>
    <li class="color red">red-1</li>
    <li class="color red">red-2</li>
    <li class="color yellow">yellow-1</li>
    <li class="color yellow">yellow-2</li>
    <li class="color yellow">yellow-3</li>
    <li class="color yellow">yellow-4</li>
</ul>

Спасибо.

2

.yellow:nth-of-type(3) и .yellow:nth-of-type(6)

3

Если привязываться к нумерации всего списка, то мне это ясно. Но можно ли привязываться только к классу .yellow (что-то типа :nth-child(n of .yellow))?
Ведь если в списке изменится количество элементов класса .red, то в css нужно будет менять все селекторы .yellow:nth-of-type().

4

на практике это решается дополнительными классами, чтобы не зависеть от структуры.

В методологии БЭМ для этого бы использовались модификаторы, рекомендую ознакомится

<li class=“color yellow yellow--first”>yellow-1</li>
1 лайк