Блог CSS3 и :nth-child()

css3Много раз нам приходилось использовать языки программирования 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.

-->

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com