CSS псевдокласс :last-child
Псевдокласс :last-child выбирает последний элемент своего родителя.
Селектор :last-of-type может быть использован в случае, если пользователь хочет выбрать и применить стиль к последнему параграфу, независимо от того, является он последним элементом или нет.
Версия
Синтаксис
:last-child
Пример
html> html> head> title>Заголовок документа title> style> p:last-child < background-color: #1c87c9; color:#fff; > style> head> body> h2>Пример селектора last-child h2> p>Lorem Ipsum - это текст-"рыба". p> p>Lorem Ipsum - это текст-"рыба". p> body> html>Рассмотрим другой пример:
Пример
html> html> head> title>Заголовок документа title> style> li:last-child < background: #1c87c9; > style> head> body> h2>Пример селектора :last-child h2> ul> li>Paris li> li>Moscow li> li>Rome li> ul> ol> li>Paris li> li>Moscow li> li>Rome li> ol> body> html>В следующем примере селектор p:last-child применяет стиль к последнему параграфу:
Пример
html> html> head> title>Заголовок документа title> style> p:last-child < background: #8ebf42; > style> head> body> h2>Пример селектора :last-child h2> p>Paragraph 1 p> p>Paragraph 2 p> p>Paragraph 3 p> p>Paragraph 4 p> body> html>Псевдокласс last-child. Как выбрать последний элемент в контейнере с помощью CSS.
В прошлой заметке мы научились выбирать первый элемент в родительском элементе с помощью селектора first-child. Дайте теперь научимся выбирать последний элемент в родительском блоке.
Это можно сделать с помощью селектора, который тоже является псевдоклассом и называется last-child.
Синтаксис здесь аналогичный:
элемент: first-child
Для примера, давайте возьмем тот же самый код, что и в предыдущей заметке:
Элемент 1Элемент 1
Элемент 3
Псевдокласс last-child — выбирает последний, по очередности расположения в коде, дочерний элемент, который располагается в родительском элементе.
#main p:last-child
Будет выделен «Элемент 3».
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Как обратиться к последнему элементу css
Псевдокласс :last-child задаёт стиль последнего элемента в группе братских элементов имеющих одного родителя.
В качестве примера рассмотрим следующий код HTML:
Роль цитокинов при дорсалгии Автор: Гордон Фримен, канд. физ.-мат. наук Содержание статьи Почта: freemen@blackmesa.com Опубликовано: datetime="2018-11-27">27 ноября 2018
Псевдокласс :last-child без указания селектора выберет все последние элементы внутри и установит для них красный цвет текста. Здесь последними идут
и они и будут выбраны.
article:last-child color: red; > :nth-last-child() и :nth-last-of-type()
Псевдоклассы :nth-child() и :nth-of-type() выбирают заданные элементы из группы братских элементов, начиная с первого. В противоположность им, псевдоклассы :nth-last-child() и :nth-last-of-type() выбирают элементы, считая от последнего.
Приведём несколько примеров.
:nth-last-child(1)Выбирает последний элемент, аналогичен :last-child.
:nth-last-child(2)Выбирает предпоследний элемент.
:nth-last-child(-n+2)Последние два элемента.
:nth-last-child(n+2)Все элементы, кроме последних двух.
:nth-last-child(2n) или :nth-last-child(even)Все чётные элементы, начиная с конца. :nth-last-child(even) идентичен :nth-child(even) только при нечётном общем числе элементов (пять, к примеру); если общее число элементов чётное (шесть, к примеру), то :nth-last-child(even) идентичен :nth-child(odd) .
:nth-last-child(2n+1) или :nth-last-child(odd)Все нечётные элементы, начиная с конца.
Псевдокласс h2:last-child(1) выбирает последний элемент из группы, затем проверяет, какой это элемент. Если это , то он будет выбран, в противном случае элемент выбран не будет. В качестве примера рассмотрим следующую структуру элементов.
Первый заголовок
Первый абзац
Второй заголовок
Второй абзац
Здесь псевдокласс без указания селектора :last-child(1) выберет последний элемент —
Второй абзац
. p:last-child(1) выберет этот же абзац, потому что он одновременно последний и это элемент
. h2:last-child(1) не выберет ничего, поскольку не совпадают два условия одновременно: последний элемент и элемент
. При этом h2:last-child(2) выберет
Второй заголовок
, здесь уже условия совпадают: элемент
и предпоследний элемент.
Псевдокласс :nth-of-type() работает схожим образом, но выбирает элементы только указанного типа. Так, запись h2:nth-last-type(1) означает выбрать последний элемент
. Наличие элементов другого типа (
) при этом игнорируется. Для HTML, приведённого выше, h2:nth-last-type(1 ) выберет строку
Второй заголовок
, поскольку это последний элемент
внутри .
В примере 1 с помощью :nth-last-of-type прячется последний абзац через свойство display со значением none . При получении кнопкой фокуса (для этого достаточно щёлкнуть по кнопке), все абзацы ниже кнопки становятся видны. При потере кнопкой фокуса (щелчок по любому месту за пределами кнопки) абзацы снова скрываются.
Пример 1. Использование :nth-last-of-type
Жизненные советы
Если вас третий день подряд клонит в сон — значит, сегодня среда.
Нет такого совета, который нельзя было бы дать.
Результат данного примера показан на рис. 1.
Рис. 1. Скрытый последний абзац
Вместо p:nth-last-of-type(1) можно использовать p:last-of-type для выбора последнего абзаца или p:nth-of-type(n+1) для выбора всех абзацев, кроме первого.
См. также
- :first-of-type и :last-of-type
- Псевдокласс :first-of-type
- Псевдокласс :last-child
- Псевдокласс :last-of-type
- Псевдокласс :nth-last-child()
- Псевдокласс :nth-last-of-type()