Третье поколение CSS принесло в вёрстку такое понятие, как псеводклассы. Сегодня речь пойдет о first-child, last-child и nth-child. С помощью них можно легко переоформить первый или последний элемент списка, изменить цвет второй строки таблицы или выделить первые пять ячеек таблицы. И всё это без использования javascript.
- «first-child» — выбирает первый элемент родителя;
- «last-child» — указывает на последний элемент родителя;
- «nth-child» — выбирает элементы исходя по параметру с начала;
- «nth-last-child» — то же самое, но начиная с конца.
С помощью «first-child» и «last-child» можно выбрать и переоформить первый или последний элемент родителя. Посмотрим как это выглядит на примере. Для этого применим стили к ячейкам таблицы с идентификатором «primer» ( ).
Псевдолкасс «nth-child» предоставляет более интересные возможности. Он позволяет применить стиль к элементам в зависимости от их порядкового номера в дереве DOM. Псевдокласс может принимать параметры:
- «odd» — выбрать нечетные элементы;
- «even» — выбрать четные элементы;
- число — выбрать элемент с определенным порядковым номером;
- выражение вида an+b.
Примеры использования nth-child()
Начинаем разбираться. Применим к таблице стиль для задания фона чётным и нечетным строкам:
Если в качестве параметра к nth-child() указать число, то можно выделить элементы по их порядковому номеру внутри родительского:
В качестве параметра можно задавать выражения вида «an+b», где «a» и «b» целые числа, а «n» — переменная, которая последовательно изменяется от 0 до количества элементов селектора. Рассмотрим пример выделения красным цветом только первых двух строк и каждого четвертого столбца.
Выбора только первых трёх элементов списка:
Выбора последних трёх элементов списка:
Выбора каждого третьего элемента списка:
Псевдокласс nth-last-child()
Осталось разобрать псевдокласс «nth-last-child» . Его отличие от «nth-child» в том, что весь отсчёт идёт от конца селектора. Примером может служить ситуация, когда требуется выделить ячейку таблицы «ИТОГО». Как правило, это последняя ячейка последней строки:
Псевдоклассы CSS могут применяться к любым элементам html документа.
I am making a very advanced website. My question: Is it possible to select all the other children except for the :first-child and the :last-child ? I know there is a :not() selector but it doesn’t work with more than one not in the parentheses. This is what I have:
Псевдокласс :first-child позволяет задать стиль для первого дочернего элемента из группы братских элементов, то есть таких, у которых один родитель.
Для демонстрации воспользуемся следующим списком.
Все элементы
здесь равны между собой и имеют общего родителя
- . Таким образом, :first-child выберет первый пункт списка с текстом «Uno».
Селектор :first-child выбирает все первые элементы в каждой группе веб-страницы, что обычно не требуется. Для сокращения охвата к :first-child нужно добавить селектор элемента — p:first-child . Эту запись следует читать справа налево — сперва выбирается первый элемент, затем проверяется что это элемент
. Если первым элементом будет
, то к нему применяются стилевые правила; если первым оказывается другой элемент (не
), то стиль к нему не применяется.
Сложности с пониманием работы :first-child обычно возникают при чередовании разных элементов, как показано ниже.
Следующий стиль сделает текст первого элемента внутри зелёным («Один»). При этом мы не указываем какой это элемент, так что простая перестановка строк в HTML будет делать любую первую строку зелёной.
Добавление div к селектору не даёт никакого результата — ни одна из строк не станет зелёной. Здесь берётся первый элемент и сравнивается, является ли он
, то стиль применяться не будет.
Заменив div на p получим первую строку зелёной, поскольку первым элементом у нас идёт именно
Аналогично :first-child работает и :last-child, только он определяет последний элемент в группе. К примеру, следующий стиль сделает зелёной строку с текстом «Tres», поскольку элемент
Псевдоклассы :first-child и :last-child обычно применяются в списках и таблицах, где последовательно идут одни и те же элементы. В примере 1 между пунктами горизонтального списка добавляется вертикальная линия через свойство border-left. Чтобы убрать линию у первого пункта используем псевдокласс :first-child .
Пример 1. :first-child для списка
Результат данного примера показан на рис. 1.
Рис. 1. Список с вертикальными линиями
Аналогичный результат достигается и с помощью :last-child , только вместо линии слева надо сделать её справа через свойство border-right.
Интересные линии можно получить за счёт комбинации светлых и тёмных границ. На рис. 2 показана таблица, в которой ячейки выделяются такими границами.
Рис. 2. Границы в таблице
К каждой ячейке добавляется белая линия справа и сверху, а также серая линия слева и снизу. :first-child и :last-child применяются для отмены линий у первой и последней ячеек в строке (пример 2).
Пример 2. Использование :last-child
Обратите внимание на селектор tr:last-child td — он позволяет обратиться к ячейкам последней строки в таблице и убрать у них линию снизу.
Источник: