Отладка селектора nth-child

Question

У меня есть следующие селекторы:

.progress:nth-child(3n+1) {
    background: teal;
}

.progress:nth-child(3n+2) {
    background: red;
}

.progress:nth-child(3n+3) {
    background: blue;
}

Однако все предметы имеют чирный фон. Правильны ли эти селекторы? Я думаю, что должен получить:

1. Тил (каждые 3, начиная с 1)
2. Красный (каждые 3, начиная с 2)
3. синий (каждые 3, начиная с 3) и т.д.

Я тестировал на Firefox 3.5.8 и Opera 10.10 на Ubuntu. Также проверено только с этими правилами в CSS. Я использую таблицу стилей YUI Reset, но исключая ее, ничего не происходит.

Answer 1

Ваш CSS кажется правильным, если принять следующий HTML:

<div class="progress">1</div>
<div class="progress">2</div>
<div class="progress">3</div>

Возможно, вы неправильно поняли значение :nth-child, и ваша комбинация HTML / CSS неверна.

foo:nth-child не означает «каждый элемент, который является n -ым потомком foo», но «каждый n th foo элемент».

Pro tip: используйте тестер :nth-child() .Или этот: http://leaverou.me/demos/nth.html

Answer 2

Я предполагаю, что каждое вхождение .progress на самом деле является первым дочерним элементом элемента. Чтобы ваш пример работал, все элементы .progress должны быть братьями и сестрами.

т.е. это будет работать:

<div class="progress">1</div>
<div class="progress">2</div>
<div class="progress">3</div>

... но это не так:

<div><span class="progress">1</span></div>
<div><span class="progress">2</span></div>
<div><span class="progress">3</span></div>

В этом случае вам нужно переместить класс progress в <div>, а затем использовать этот CSS:

.progress:nth-child(3n+1) span {
    background: teal;
}