css последний элемент списка

Селектор или псевдокласс :last-child позволяет настраивать характеристики оформления последнего элемента из ряда блоков содержащихся внутри родительского контейнера.

Псевдокласс :last-child можно использовать в частности для списков, например если элементу списка
задать свойство border-bottom: 3px solid black; то в результате под всеми словами или предложениями из которых состоит список появятся сплошная линия чёрного цвета толщина которой составляет три пикселя. С эстетической точки зрения последнюю подчёркивающую линию можно убрать, с помощью li:last-child задав свойство border-bottom со значением ноль.

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

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

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

1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4

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

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

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

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

1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4

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

1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4

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

1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8
2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8
3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8
4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8

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

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

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

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

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

1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4
5.1 5.2 5.3 5.4

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

В прошлой заметке мы научились выбирать первый элемент в родительском элементе с помощью селектора first-child. Дайте теперь научимся выбирать последний элемент в родительском блоке.

Это можно сделать с помощью селектора, который тоже является псевдоклассом и называется last-child.

Синтаксис здесь аналогичный:

Для примера, давайте возьмем тот же самый код, что и в предыдущей заметке:

Псевдокласс last-child — выбирает последний, по очередности расположения в коде, дочерний элемент, который располагается в родительском элементе.

Оцените статью