CSS магия: стилизации элементов на основе нумерации

Псевдокласс :nth-child в CSS позволяет выбирать элементы на основе их порядкового номера в родительском контейнере. Селектор :nth-child(n) выбирает каждый n-ный элемент внутри родительского контейнера. Например, :nth-child(2n) выберет каждый второй элемент, :nth-child(odd) выберет нечетные элементы, :nth-child(even) выберет четные элементы и т.д.

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

  • Гибкость. Позволяет выбирать элементы без необходимости добавления классов или идентификаторов к каждому элементу.
  • Динамичность. Можно комбинировать с другими селекторами для создания более сложных стилей и адаптивных дизайнов.

Ниже рассмотрим использование данного псевдокласса на конкретных примерах.

Добавление стилей определенному элементу

Чтобы задать стили определенному элементу, например элементу номер 5, нужно написать:

:nth-child(5) {}

Пример: сделаем пятный элемент синим

<div class="grid-container">
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
</div>
/* общие стили */
.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	grid-template-rows: repeat(3, 100px);
	gap: 5px;
}
.block {
	width: 100px;
	height: 100px;
	border: 1px solid black;
}

/* Закрашиваем 5 элемент */
.grid-container .block:nth-child(5) {
	background-color: blue;
}

Добавление стилей каждому n-ому элементу

Можно задать стили каждому второму, третьему, четвертому и т.д. элементу. Наприме чтобы задать стили каждому третьему элементу нужно написать:

:nth-child(3n) {}

Пример

<div class="grid-container">
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
</div>
/* общие стили */
.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	grid-template-rows: repeat(3, 100px);
	gap: 5px;
}
.block {
	width: 100px;
	height: 100px;
	border: 1px solid black;
}

/* Закрашиваем каждый третий элемент (3, 6, 9, ...) */
.grid-container .block:nth-child(3n) {
	background-color: red;
}
/* Закрашиваем каждый элементы (1, 4, 7, ...) */
.grid-container .block:nth-child(3n-2) {
	background-color: green;
}

Так же примеры можно посмотреть на отдельной странице.

В целом, :nth-child является мощным инструментом в CSS, который помогает упростить стилизацию и улучшить эффективность верстки веб-страниц.

Рубрики: CSS

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

Bitrix подключить класс компонента

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

PHP Удалить лишние нули после запятой

Когда в проекте диапазон чисел от 0,0001 до 1 000 000, удобно автоматически удалять лишнии нули после запятой.

Команда grep. Примеры использования

grep - удобная и быстрая команда, здесь приведены примеры как произвести рекурсивный поиск в каталоге, поиск среди запущенных процессов и другие.

Битрикс 24 удалить сделку

В статье приводятся способы удаления сделки.

Подключить bitrix без подключения шаблона сайта

В статье приводится пример кода подключения bitrix без подключения шаблона сайта. Так же описано когда это может пригодится.

CSS простой горизонтальный слайдер

В статье приводится пример кода для создания простого горизонтального слайдера с использованием CSS и небольшим количеством JS кода. Для реализации потребуется всего около 60 строк стилей и js кода.

Комментарии

Комментариев пока нет
Данный сайт использует файлы cookies. Продолжая просмотр сайта, вы соглашаетесь с использованием файлов cookies.
ОК