Почему не срабатывает :nth-child?

Question

[Bestolkovy]

Добрый день!

Есть конструкция:

<div>
  <p class="foo"></p>
  <p class="foo"></p>

  <p class="bar"></p>
  <p class="bar"></p>
  <p class="bar"></p>
  <p class="bar"></p>
</div>

Необходимо выбрать второй и третий элемент с классом .bar. Пишу, соответственно:

.bar:nth-child(2),
.bar:nth-child(3) {
  color: yellow;
}

Почему не срабатывает? Как выбрать второй и третий элемент с классом .bar?

Answer 1

[metaf]

Потому что nth считает по дереву, а не по селектору. А селектор - это доп. условие, т.е. И 3 по дереву, И .bar класс, что, естественно, не соответсвует вашему условию.
Костыльное решение: codepen.io/anon/pen/QKzXoq

Comments

[Edward]

Ну вот, во время повсеместного наступления BEM, Вы научили человека плохому :)

[Bestolkovy]

Edward: Ну, знаете, какое-никакое - логическое и понятное решение.

Answer 2

[Edward]

<div>
  <p class="foo"></p>
  <p class="foo"></p>

  <p class="bar"></p>
  <p class="bar bar--yellow"></p>
  <p class="bar bar--yellow"></p>
  <p class="bar"></p>
</div>

.bar--yellow {
    color: yellow;
}

Или как выше уже написали

.bar:nth-child(4),
.bar:nth-child(5) {
  color: yellow;
}

Первый вариант надежнее, так как, если у вас поменяется количество элементов, то не придется переписывать стили.

Comments

[Савелий Дзвонкевич]

создать отдельный класс .bar--yellow - лучшее решение. Вообще нужно по минимуму использовать превдо-классы.

Answer 3

[Ankhena]

При такой конструкции (если неизвестно сколько элементов foo впереди и они могут идти вперемешку) на CSS никак.

Используйте обертку или доп.классы.
Или JS

Answer 4

[sleepyKitty]

.bar:nth-child(4),
.bar:nth-child(5) {
  color: yellow;
}

Answer 5

[Савелий Дзвонкевич]

Вам нужен

.element:nth-of-type {

}

или как коллега выше написал, лучше используйте дополнительный класс

Answer 6

[WQP]

Через jquery присваивайте им ещё один класс и его уже меняйте

Answer 7

[dom1n1k]

Не срабатывает потому, что :nth-child подразумевает сквозной номер элемента в родителе, а не среди подмножества элементов с каким-то классом.
Поведение это спорное и не всегда удобное, но так уж решили авторы спецификаций.