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

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

• «first-child» — выбирает первый элемент родителя;
• «last-child» — указывает на последний элемент родителя;
• «nth-child» — выбирает элементы исходя по параметру с начала;
• «nth-last-child» — то же самое, но начиная с конца.

С помощью «first-child» и «last-child» можно выбрать и переоформить первый или последний элемент родителя. Посмотрим как это выглядит на примере. Для этого применим стили к ячейкам таблицы с идентификатором «primer» (id="primer").

<style>
    #primer tr:first-child td { background-color:red; }
    #primer tr:last-child td { background-color:green; }
</style>

Псевдолкасс «nth-child» предоставляет более интересные возможности. Он позволяет применить стиль к элементам в зависимости от их порядкового номера в дереве DOM. Псевдокласс может принимать параметры:

• «odd» — выбрать нечетные элементы;
• «even» — выбрать четные элементы;
• число — выбрать элемент с определенным порядковым номером;
• выражение вида an+b.

Примеры использования nth-child()

Начинаем разбираться. Применим к таблице стиль для задания фона чётным и нечетным строкам:

<style>
    #primer tr:nth-child(odd) td { background-color:red; }
    #primer tr:nth-child(even) td { background-color:green; }
</style>

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

<style>
    #primer td:nth-child(2) { background-color:red; }
    #primer td:nth-child(3) { background-color:green; }
</style>

В качестве параметра можно задавать выражения вида «an+b», где «a» и «b» целые числа, а «n» — переменная, которая последовательно изменяется от 0 до количества элементов селектора. Рассмотрим пример выделения красным цветом только первых двух строк и каждого четвертого столбца.

<style>
    #primer tr:nth-child(-n+2) td { background-color:red; }
    #primer td:nth-child(4n+4) { background-color:red; }
</style>

Выбора только первых трёх элементов списка:

li:nth-child(-n+3)

Выбора последних трёх элементов списка:

li:nth-child(n+3)

Выбора каждого третьего элемента списка:

li:nth-child(3n+1)

Псевдокласс nth-last-child()

Осталось разобрать псевдокласс «nth-last-child». Его отличие от «nth-child» в том, что весь отсчёт идёт от конца селектора. Примером может служить ситуация, когда требуется выделить ячейку таблицы «ИТОГО». Как правило, это последняя ячейка последней строки:

<style>
    #primer tr:nth-child(1) td:nth-child(1) {background-color:red;}
    #primer tr:nth-last-child(1) td:nth-last-child(1) {background-color:green;}
</style>

Псевдоклассы CSS могут применяться к любым элементам html документа.