Блог → CSS3 и :nth-child()
Много раз нам приходилось использовать языки программирования JavaScript или PHP, чтобы добавить определенный класс к первому или последнему элементу списка. Задача еще больше усложнялась, когда приходилось выделить четные и нечетные строки таблицы. С появлением CSS3 и обновлением линейки браузеров, мы можем избавиться от скриптов и значительно упростить код. Рассмотрим псевдокласс :nth-child()
Что такое :nth-child()
nth-child(N) — это псевдокласс селектора, который может быть применен к любому N элементу селектора, все что нам нужно сделать, это указать N.
li:nth-child(n) { background-color: #ccc; }
Поддержка браузерами :nth-child()
- IE9+
- Chrome 1.0+
- Opera 9.6+
- Safari 3.1+
- Firefox 3.6+
Возможности использования
-
Числовые (N) значения
‘N’ может быть любое число. Это порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с первого (1) элемента в списке.
-
Чётные (even) и нечётные (odd) элементы
Если необходимо обратиться к чётным элементам, то теперь вместо порядкового номера можно использовать слово even, а для нечётных odd.
-
Написание формулы
Чтобы изменить каждый четвёртый элемент, воспользуемся формулой ‘xn+y’, где x — шаг, n — это счётчик, который автоматический принимает значение 0, 1, 2…., а y — это порядковый номер элемента, с которого мы хотим начать. Если y = 0, то он не указывается и число отсчёта равно x.
Подводим итог
Псевдокласс nth-child() делает работу верстальщика более универсальной. nth-child() позволяет обойтись без статических классов в списках и таблицах. Псевдокласс позволяют верстальщикам во многих случаях обходиться без javascript.
- 4 комментариев
- 29 июля 2013 года
Комментарии
Написать комментарий
Используйте в комментариях html-теги
Кстати, решал на днях задачу вывода плитки блоков неизвестной ширины с фоном в шахматном порядке. Без JS решить не смог. Получилось только для нечетного числа колонок и частные случаи для нечетного количества колонок.
Чем не задача для конкурса верстальщиков-виртуозов? :-)
При помощи
:nth-child()
задача с шахматной доской решается в две строчки :)Расширил страницу с примерами.
Да, если есть разбиение по строкам. Но мы-то лёгких путей не ищем и решаем задачу для вывода сплошного списка элементов:
http://jsfiddle.net/GruZZ/gGZFC/
Отличное решение задачи со списками. Я это не знал!!!! Благодарю!!!!