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

Комментарии

GruZZ 30 июля 2013 года, 20:46 #

Кстати, решал на днях задачу вывода плитки блоков неизвестной ширины с фоном в шахматном порядке. Без JS решить не смог. Получилось только для нечетного числа колонок и частные случаи для нечетного количества колонок.

Чем не задача для конкурса верстальщиков-виртуозов? :-)

webmolot 31 июля 2013 года, 10:22 #

При помощи :nth-child() задача с шахматной доской решается в две строчки :)

 
table.nth-chess tr:nth-child(odd) td:nth-child(2n),
table.nth-chess tr:nth-child(even) td:nth-child(2n+1) {
    background:#ccc;
} 

Расширил страницу с примерами.

GruZZ 31 июля 2013 года, 11:22 #

Да, если есть разбиение по строкам. Но мы-то лёгких путей не ищем и решаем задачу для вывода сплошного списка элементов:

http://jsfiddle.net/GruZZ/gGZFC/

Akmaljon 13 октября 2013 года, 18:48 #

Отличное решение задачи со списками. Я это не знал!!!! Благодарю!!!!

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

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

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