Псевдокласс :nth-child(): что это такое и как использовать?

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

Синтаксис:

:nth-child(n)

В качестве аргумента n можно использовать числовое значение или формулу. Первый элемент родительского элемента имеет позицию 1.

Пример:

Допустим, у нас есть список элементов li внутри родительского элемента ul. И мы хотим изменить фоновый цвет 2-го элемента списка. Для этого мы можем использовать следующий CSS-код:

ul li:nth-child(2) {

background-color: #f2f2f2;

}

А вот еще один пример. Допустим, у нас есть галерея изображений, и мы хотим применить стили к каждому четному элементу галереи. Мы можем использовать следующий CSS-код:

.gallery-img:nth-child(even) {

border: 2px solid red;

}

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

Также можно использовать формулы для выбора нужных элементов. Например, :nth-child(2n+1) выберет все нечетные элементы, включая первый элемент.

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