Abr@X@bra.ru
Как работает CSS свойство nth-child и nth-of-type
Как работает CSS свойство nth-child и nth-of-type

Как работает CSS свойство nth-child и nth-of-type

26.09.2018
24
:nth-child — один из моих самых любимых селекторов, потому что с помощью него можно делать клевые разноцветные штуки собирать элементы списка в группы произвольной длины и делать с ними разные интересные вещи: от полосатых таблиц до целых разноцветных дизайнов, и все это без необходимости задавать дополнительные классы или как-то менять разметку.

Вот простой пример полосатых таблиц:



Полоски помогают легче скользить глазами по длинной строке или столбцу, это увеличивает читабельность больших таблиц, а сделать это можно всего лишь парой строчек в CSS:

/* Горизонтальные полоски */
TR:nth-child(odd) {
    background: #EEE;
    }
/* Вертикальные полоски */
TD:nth-child(odd) {
    background: #EEE;
    }

Или вот что можно сделать с обычным списком вроде такого:

<ul>
  <li> </li>
  <li> </li>
  <li> </li>
  <li> </li>
  <li> </li>
</ul>

Никаких дополнительных классов, все сделано только с помощью :nth-child:



Как работает nth-child()?

В круглых скобках задается размер цикла: например (3n) выберет каждый третий элемент. Также можно задать сдвиг вперед или назад: (3n+1) — найдет каждый третий и сделает один шаг вперед, а (3n-2) — два шага назад от найденого. Если размер цикла не задан — (n) — выберутся все элементы списка. Если размер цикла не задан, но задано конкретное число — (5) — выберется элемент списка с этим индексом.

nth-child в своем цикле считает все элементы, находящиеся на одном уровне вложенности относительно родительского элемента.

Селектор работает во всех современных браузерах с поддержкой CSS3.

Примеры



Выбирает каждый 3-й элемент списка.



Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг вперед. Таким образом можно выбрать первые элементы в каждой группе.



(even) — ключевое слово, выбирает четные элементы списка, как если бы мы задали (2n).



(odd) — ключевое слово, выбирает нечетные элементы, как если бы мы задали (2n+1).



Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг назад.



Выберет 5-й элемент списка.



Выберет все элементы начиная с 6-го.



Выберет 6 элементов с начала списка.

Сочетания селекторов



Выберет элементы в диапазоне от 3 до 8-ми.



Выберет элементы начиная с 4-го, а потом выделит только четные из них.


Выберет 1-й, 4-й, 7-й и 10-й элементы, а затем только четные из них.



Выберет элементы с 3-го по 8-й, а затем только четные из них.

Все примеры выше сделаны на основе однородного списка, но что если нам требуется выбрать, например, несколько абзацев в статье, которая содержит не только абзацы, но и заголовки?

Предположим, мы хотим покрасить нечетные абзацы, поэтому напишем что-то вроде:

P:nth-child(odd)

но результат будет каким-то странным (слева), и если попробовать написать то же самое, но без тега (справа) — сразу становится ясно почему:



:nth-child считает все элементы, не обращая внимания на тег, хотя показывает только те, что соответствуют заданному тегу или классу.

Чтобы выбрать только абзацы, нам потребуется другой селектор — :nth-of-type:

:nth-of-type работает также, как :nth-child, но считает только элементы заданного типа.

:nth-child удобно использовать в сочетании с Sass:

С помощью :nth-child одинаковым элементам списка заданы разноцветные рамки и разные фоновые картинки.

Используя широкие возможности этих технологий можно делать не только забавные галереи с котятами, но и прочие нарядные штуки разной степени бесполезности (нажмите Rerun, если анимация застыла):


Здесь с помощью :nth-child элементам списка помимо разноцветных градиентов задаются также задержки воспроизведения анимации, из-за чего фигуры движутся не все вместе, а волнами.

:nth-child — очень полезный селектор, который поможет добавить разнообразия однотипным элементам сайта и тем самым без особых усилий сделает страницу интереснее для визуального восприятия.


Если Вам или Вашей компании необходимо реализовать верстку макетов, пишите  мне.  
Профессионально занимаюсь версткой сайтов любой сложности, пишу гибкий качественный код. Максимальное использование возможностей CSS эффектов и анимаций. Использование подходов БЭМ. 
Email - admin@abraxabra.ru
Telegram - @abraxabr 
Vk - https://vk.com/ivan_raiz




Источник: css.yoksel

CSS
Читайте также:
Использование SVG на вашем сайте

Использование SVG на вашем сайте

Поддержка масштабируемой векторной графики (SVG) превосходна работает во всех современных браузерах, формат изоб...
Читать
Готовить front-end стало еще проще

Готовить front-end стало еще проще

В этом посте расскажу вам об одном классном сервисе, который сделает жизнь front-end разработчика еще проще и быстрее.
Читать
Визуализация данных на JS

Визуализация данных на JS

D3 (Data-Driven Documents — Управление данными в документах [досл.]). Она позволяет «оживить» ваш проект, используя...
Читать