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, который помогает упростить стилизацию и улучшить эффективность верстки веб-страниц.