CSS nth-child: правила формирования выборки элементов

CSS nth-child - это селектор, который позволяет выбрать элементы на основе их порядкового номера в родительском элементе.

Синтаксис:

:nth-child(n)

где n - порядковый номер элемента, который нужно выбрать.

Пример 1:

div:nth-child(3) {
  color: blue;
}

Этот код выберет третий div-элемент внутри его родительского элемента и задаст ему синий цвет.

Пример 2:

li:nth-child(even) {
  background-color: grey;
}

Этот код выбирает каждый четный элемент списка и задает ему фоновый серый цвет.

Пример 3:

p:nth-child(2n+1) {
  font-weight: bold;
}

Этот код выберет каждый нечетный абзац и задаст ему жирное начертание.

Можно использовать другие математические операции для определения порядкового номера элемента, например: `2n-1`, `3n+2`, и т.д.

Также можно комбинировать nth-child с другими селекторами, например:

div ul li:nth-child(2) {
  color: green;
}

Этот код выберет второй li-элемент внутри ul-элемента, который находится внутри div-элемента и задаст ему зеленый цвет.

В целом, использование nth-child селектора дает возможность более гибкого и точного выбора элементов в CSS и может значительно упростить написание CSS-кода.