Debugging селектор п-го ребенка

Question

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

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

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

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

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

1. Teal (каждые 3, начиная с 1)
2. Красный (каждые 3, начиная с 2)
3. Blue (каждые 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 не означает, что «каждый элемент, который является н я ребенка foo», но «каждый п я foo элемента».

Pro tip: использование the :nth-child() tester. Или этот: 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; 
}