: селектор CSS для выбора элементов по индексу

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

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

parent-element :nth-child(formula) {
    /* CSS rules */
}

Где parent-element - это родительский элемент, а formula - это формула, которая определяет, какие элементы должны быть выбраны. Формула может состоять из различных аргументов, которые мы рассмотрим ниже.

Пример 1: n-ый элемент - выбирает каждый n-ый элемент.

<li>:nth-child(3n) {
    color: red;
}

В этом примере выбираются все элементы списка li, каждый третий элемент будет окрашен в красный цвет.

Пример 2: элементы перед n-ым - выбирает все элементы, которые находятся перед n-ым элементом.

<li>:nth-child(-n+3) {
    font-weight: bold;
}

В этом примере будут выбраны первые три элемента списка li и им будет применено свойство font-weight: bold;.

Пример 3: последний элемент - выбирает последний элемент внутри родительского элемента.

<div>:nth-child(2):last-child {
    background-color: yellow;
}

В данном примере будет выбран второй элемент div, если он является последним элементом внутри своего родителя. Ему будет применено свойство background-color: yellow;.

Пример 4: применение нечетного или четного номера элемента

<p>:nth-child(odd) {
    background-color: #f1f1f1;
}

<p>:nth-child(even) {
    background-color: #ffffff;
}

В этом примере чередуются фоновые цвета пунктов текста p. Нечетные пункты получат свойство background-color: #f1f1f1;, а четные пункты - background-color: #ffffff;.

Пример 5: комбинированное применение нескольких формул

<li>:nth-child(4n+1):not(:last-child) {
    color: blue;
}

Здесь выбираются каждый четвертый элемент списка li, при этом игнорируется последний элемент, и ему присваивается свойство color: blue;.

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

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