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 24 получить ссылку на контакт, сделку, компанию, лид и т.д.

В статье приводится пример кода для получения ссылки на контакт, сделку, компанию, лид и т.д. с помощью метода \CCrmOwnerType::GetEntityShowPath()

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

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

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

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

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

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

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

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

Bitrix сбросить буфер вывода

Функция RestartBuffer() в Bitrix используется для сброса буфера вывода. Она позволяет прервать вывод страницы на определенном этапе выполнения скрипта и начать вывод заново. В статье рассмотрим основные сценарии использования данной функции, рассмотрим пример кода.

Комментарии

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