Скрипт для выделения фоном нечетной строки списка Псевдо-селектор nth-child

Как работает CSS-селектор nth-child

В CSS существует селектор, если быть более точным, псевдо-селектор, называемый nth-child. Пример его использования:

ul li:nth-child(3n+3) {
 color: #ccc;
}

Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д. Но как это работает? А также какую выгоду можно извлечь используя nth-child?

Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even (чётный) и odd (нечётный). Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd - нечётные (1, 3, 5). Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:

ul li:nth-child(5) {
 color : #ccc;
}

Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:

(3 x 0) + 3 = 3 = 3-ий элемент
(3 x 1) + 3 = 6 = 6-ой элемент
(3 x 2) + 3 = 9 = 9-ый элемент
и т.д.

Теперь попробуем следующее выражение: nth-child(2n+1):

(2 x 0) + 1 = 1 = 1-ый элемент
(2 x 1) + 1 = 3 = 3-ий элемент
(2 x 2) + 1 = 5 = 5-ый элемент
и т.д.

В итоге получили тоже самое что и в случае с odd, таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):

(3 x 0) + 0 = 0 = нет соответствия
(3 x 1) + 0 = 3 = 3-ий элемент
(3 x 2) + 0 = 6 = 6-ой элемент
и т.д.

Как видите, результат тот же, но не надо писать "+3". Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:

(4 x 0) - 1 = -1 = нет соответствия
(4 x 1) - 1 = 3 = 3-ий элемент
(4 x 2) - 1 = 7 = 7-ой элемент
и т.д.

Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с "-n+3":

-0 + 3 = 3 = 3ий элемент
-1 + 3 = 2 = 2-ой элемент
-2 + 3 = 1 = 1-ый элемент
-3 + 3 = 0 = нет соответствия

Кроссбраузерностьnth-child является одним из тех самых несчастных аттрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат - это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход. Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.
Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.

1. Стиль применится ко всем нечетным строкам таблицы tr:nth-child(2n+1)
2. Стиль также применится ко всем нечетным строкам таблицы tr:nth-child(odd)
3. Стиль применится ко всем четным строкам таблицы tr:nth-child(2n)
4. Стиль также применится ко всем четным строкам таблицы tr:nth-child(even)
5. Стиль применится только к первому потомку родительского элемента (в данном случае использование :nth-child аналогично селектору first-child) span:nth-child(0n+1) или span:nth-child(1)

Во втором блоке примеров даются пояснения к каким элементам будет применен будут применены CSS-свойства, указываются конкретные свойства.

1. Цвет текста в пятом пункте li будет желтым. ul - родительский элемент, li - дочерний (потомок). ul li:nth-child(5) {color: yellow;}
2. Цвет текста в каждом втором пункте li, начиная с четвертого, будет красным. ul - родительский элемент, li - дочерний (потомок). ul li:nth-child(2n+4) {color: red;}
3. Цвет текста в каждом четном абзаце будет зеленым. p:nth-child(2n+1) {background-color: lime;}

Первоисточник!