Примеры использования :nth-child

В одной из предыдущих статей мы с вами познакомились с замечательными псевдоклассами :nth-child и :nth-of-type, а также разобрали их отличия.

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

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

В данном выражении мы можем указывать ключевые слова (even или odd), числа или формулу. Если мы используем формулу, то нам доступна переменная n, которая может применять значения от 0 до n.

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

Допустим у нас есть обычный маркированный список, состоящий из 8-ми элементов:

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

Для него заданы базовые стили:

ul {
	list-style: none;
	padding: 0;
	margin: 30px;
}
li {
	display: inline-block;
	width: 30px;
	height: 30px;
	border: 3px solid #4caf50;
	border-radius: 3px;
}

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

Выбираем произвольный элемент

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

li:nth-child(3) {
	background: #4caf50;
}

Выбираем четные элементы

Для отбора четных элементов есть ключевое слово even, которое мы и можем указать в скобках.

li:nth-child(even) { /* или можно использовать формулу 2n */
	background: #4caf50;
}

Также вместо even мы можем задать формулу 2n, которая аналогично отберет все четные элементы.

Как данная формула работает?

Как я писал выше, n - это переменная, которая принимает значения от 0 до n.
Формула 2n задает некий цикл в котором будет выполнено следующее:

2 * 0 = 0 (данного соответсвия не будет найдено, т.к. первый элемент имеет порядковый номер 1, а не 0)
2 * 1 = 2 (отбираем 2-й элемент)
2 * 2 = 4 (отбираем 4-й элемент)
2 * 3 = 6 (отбираем 6-й элемент)
2 * 4 = 8 (отбираем 8-й элемент)

Выбираем нечетные элементы

Для отбора нечетных элементов есть уже другое ключевое слово odd.

li:nth-child(odd) { /* или можно использовать формулу 2n+1 */
	background: #4caf50;
}

Выбираем каждый третий элемент

Как отбирать каждый второй элемент (т.е. четные), мы знаем. Для этого есть ключевое слово even или формула 2n.

А как отбирать каждый третий?

Здесь уже нет ключевых слов и поэтому реализовать можно лишь с помощь формулы 3n.

li:nth-child(3n) {
	background: #4caf50;
}

Если нам потребуется каждый четвертый элемент, то мы бы использовали формулу 4n, если бы каждый пятый, то - 5n, ну и так далее.

Выбираем каждый третий элемент, начиная с первого

Иногда требуется отбирать элементы с определенным шагом (например с шагом 3), при этом захватывая первый элемент.

Для решения данной задачи нам поможет формула 3n+1.

li:nth-child(3n+1) {
	background: #4caf50;
}

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

Выбираем первые три элемента

li:nth-child(-n+3) {
	background: #4caf50;
}

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

li:nth-child(n+5) {
	background: #4caf50;
}

Заключение

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

Добавить комментарий

  • variant5

  • 28.06.2018 15:37

    Спасибо, Александр! Раньше это тема для Меня была очень сложной, а теперь всё OK!

  • Спасибо!! Нашел решение проблемы!

  • 11.03.2018 15:41

    Псевдокласс использовал, но в самом примитивном варианте. С числовым значением. Не знал, что он настолько гибкий. Спасибо.

  • 14.09.2017 13:53

    Спасибо дорогой друг!Ты очень всё доходчиво и понятно объясняешь.Я благодаря тебе хоть начал понимать структуру строения.Дай Бог тебе здоровья!!!