|
В 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.
Ну и на последок
Вы можете поиграть с различными выражениями для селектора на страничке с примером.
Перейти обратно к новости
|