Стилизация каждого 3-го элемента списка с помощью CSS?

Возможно ли, чтобы я смоделировал каждый третий элемент списка?

В настоящее время в моем div 960px у меня есть список полей, которые плавают влево и отображаются в виде сетки 3x3. Они также имеют margin-right от 30px, но поскольку у 3-го 6-го и 9-го элементов списка есть этот запас, он заставляет их спрыгнуть вниз, делая неправильное отображение сетки

Как легко сделать 3-й 6-й и 9-й не иметь правого поля без необходимости давать им другой класс или это единственный способ сделать это?

Ответ 1

Да, вы можете использовать селектор :nth-child.

В этом случае вы должны использовать:

li:nth-child(3n) {
// Styling for every third element here.
}

: п-й ребенок (3n):

3(0) = 0
3(1) = 3
3(2) = 6
3(3) = 9
3(4) = 12

:nth-child() совместим в Chrome, Firefox и IE9 +.

Для работы с :nth-child() среди других селекторов псевдо-классов/атрибутов в IE6 до IE8 см. эту ссылку.

Ответ 2

Вы можете использовать селектор :nth-child для этого

li:nth-child(3n) {
 /* your rules here */
}

Ответ 3

Попробуйте это

box:nth-child(3n) {  
     ...
}

DEMO

nth-child поддержка браузера

Ответ 4

:nth-child - ответ, который вы ищете.