Как использовать псевдо-селектор :nth-child() в CSS

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

Синтаксис :nth-child() выглядит следующим образом:

css
/* выделение первого дочернего элемента */
parent :nth-child(1) {
  /* стили */
}
/* выделение третьего дочернего элемента */
parent :nth-child(3) {
  /* стили */
}

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

css
/* выделение каждого второго дочернего элемента */
parent :nth-child(2n) {
  /* стили */
}
/* выделение каждого третьего дочернего элемента начиная с 2 */
parent :nth-child(3n+2) {
  /* стили */
}

Пример кода для выделения первого и третьего элемента списка:

html

  
элемент 1
  
элемент 2
  
элемент 3
  
элемент 4
  
элемент 5

css
/* выделение первого и третьего элемента списка */
ul li:nth-child(1),
ul li:nth-child(3) {
  /* стили */
}

Также, можно использовать данное свойство для анимации, например, для вращения каждого четвертого элемента на 45 градусов:

css
/* вращение каждого четвертого элемента на 45 градусов */
.parent :nth-child(4n) {
  transition: transform 0.5s ease-in-out;
  transform: rotate(45deg);
}

Таким образом, селектор :nth-child() в CSS очень полезен для выбора определенных элементов на странице и задания им уникальных стилей и анимаций.