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

Заключение

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

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

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

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

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

Nickolas 14 сентября в 13:53

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

Ответить
Наверх

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

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

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

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

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

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

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

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

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

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

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

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