Примеры использования :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;
}

Заключение

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

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

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

Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад