Руководство по использованию псевдокласса nth-child в CSS

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

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

:nth-child(an+b)

Где an+b представляет собой формулу, которая определяет порядковый номер элемента. Разберемся в подробностях:

• a - коэффициент перед n, указывающий интервал между выбранными элементами. Он может быть простым числом (1, 2, 3 и т.д.) или из выражения вида 2n, 3n+1 и др.
• b - константа, указывающая начальную позицию. Она может быть положительным или отрицательным числом.

Давайте рассмотрим несколько примеров использования псевдоклассов :nth-child():

1. Пример1 – выбрать все четные элементы:

   li:nth-child(2n) {
     background-color: lightgrey;
   }

2. Пример2 – выбрать каждый третий элемент, начиная с третьего:

   p:nth-child(3n+3) {
     color: blue;
   }

3. Пример3 – выбрать первый элемент:

   div:nth-child(1) {
     font-weight: bold;
   }

4. Пример4 – выбрать только детей определенного элемента:

   ul li:nth-child(odd) {
     list-style-type: circle;
   }

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