Блог → 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+

Возможности использования

1. Числовые (N) значения

   ‘N’ может быть любое число. Это порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с первого (1) элемента в списке.

2. Чётные (even) и нечётные (odd) элементы

   Если необходимо обратиться к чётным элементам,  то теперь вместо порядкового номера можно использовать слово even, а для нечётных odd.

3. Написание формулы

   Чтобы изменить каждый четвёртый элемент, воспользуемся формулой ‘xn+y’, где x —  шаг, n — это счётчик, который автоматический принимает значение 0, 1, 2…., а  y — это порядковый номер элемента, с которого мы хотим начать. Если y = 0, то он не указывается и число отсчёта равно x.

Посмотреть примеры

Подводим итог

Псевдокласс nth-child() делает работу верстальщика более универсальной. nth-child() позволяет обойтись без статических классов в списках и таблицах. Псевдокласс позволяют верстальщикам во многих случаях обходиться без javascript.

• Tweet