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

tr:nth-child(odd)
{
    // background color
}

tr:nth-child(even)
{
    // another background color
}

Еще псевдокласс :nth-child позволяет разделить элементы с общим свойством на группы и затем выбрать определенный элемент из каждой группы, используя следующий синтаксис:

tr:nth-child(an+b)
{
}

Здесь a определяет количество элементов в группе, а b определяет, какой элемент из группы будет выбран. Если использовать значение 2n+1, то элементы будут разделены на группы по два, и будут выбраны первые элементы каждой группы, т. е., элементы с нечетным порядковым номером. Если использовать значение 2n+2, то элементы снова будут разделены на группы по два, но теперь будут выбраны вторые элементы каждой группы, т. е., элементы с четным порядковым номером.

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

tr:nth-child(4n+4)
{
    // задаем стили каждому четвертому элементу
}

Ниже приведен список из десяти элементов, и мы воспользуемся псевдоклассами :nth-child, :first-child и :last-child, чтобы выбрать элементы, которые хотим выделить.

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

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

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(4){
     font-size:150%;
     font-weight:bold;
     color:green;
}

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

Если задать псевдоклассу :nth-child значение в виде n+ число, можно выбрать все элементы, начиная с элемента с этим порядковым номером:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(n+6){
     font-size:150%;
     font-weight:bold;
     color:green;
}

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

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

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(-n+5){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-child для выбора каждого третьего элемента 

Псевдокласс :nth-child можно использовать, чтобы выбрать последовательность элементов, задавая, сколько элементов в последовательности и порядковый номер нужного элемента. Если задать значение 3n+1, будет выбран каждый третий элемент, начиная с первого:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

#selector_example li:nth-child(3n+1){
     font-size:150%;
     font-weight:bold;
     color:green;
} 

Использование псевдокласса CSS :nth-child для выбора только нечетных элементов 

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

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(odd){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-child для выбора только четных элементов 

Этот пример показывает то же, что и прошлый, но на этот раз выбраны все элементы с четными порядковыми номерами. Т.е., второй, четвертый, шестой, восьмой, десятый и т. д. элементы:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

#selector_example li:nth-child(even){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :first-child для выбора первого элемента 

Другой псевдокласс :first-child выберет первый элемент:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:first-child{
     font-size:150%;
     font-weight:bold;
     color:green;
} 

Использование псевдокласса CSS :last-child для выбора последнего элемента 

Кроме псевдокласса :first-child есть псевдокласс :last-child, который выберет последний элемент из группы элементов:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10 

#selector_example li:last-child{
     font-size:150%;
     font-weight:bold;
     color:green;
}

Использование псевдокласса CSS :nth-last-child для выбора предпоследнего элемента 

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

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-last-child(2){
     font-size:150%;
     font-weight:bold;
     color:green;
} 

Ознакомьтесь с возможностями псевдокласса :nth-child  с помощью «Конструктора nth-child».

Дополнительные материалы 

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

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:

• Обзор условных инструкций CSS
• Обзор единиц измерения CSS3 и их использования
• Использование свойства CSS3 @font-face