Псевдокласс :last-child задает стилевое оформление последнего элемента своего родителя.
HTML5 CSS3 IE Cr Op Sa Fx
last-child При истечении возможности понимания вышеизложенной информации вы имеете объективную возможность подать официальный запрос главному субординатору локальной виртуальной вселенной. Результат примера показан на рис. 1. В данном примере псевдокласс :last-child применяется для определения стиля последнего тега , расположенного внутри контейнера с именем класса block . Это позволило создать цветную полосу внизу блока без включения новых классов.
Рис. 1. Результат использования псевдокласса :last-child
Псевдоклассы :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) не выберет ничего, поскольку не совпадают два условия одновременно: последний элемент и элемент
, здесь уже условия совпадают: элемент
Псевдокласс :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) для выбора всех абзацев, кроме первого.
с помощью css это сделать нельзя. на :last-child нельзя наложить условие (это всегда последний элемент видимый или нет).
можно сделать при помощи селекторов jquery. файктически это означает, что при помощи javascript.
также можно сделать на ванильном javascript (кода будет чуть больше). переделал пример ниже под него.
var items = document.querySelectorAll('.menuElement:not(.none)'); if (items.length > 0) items[items.length-1].className += ' last';.menuElement.last < color: red; >.none
CSS псевдокласс :last-child находит любой элемент, являющийся последним в его родителе.
element:last-child
ul> li>Этот элемент не лаймовый.li> li>И этот тоже.li> li>А этот да! :)li> ul>
li:last-child background-color: lime; >
| Specification |
|---|
| Selectors Level 4 # the-last-child-pseudo |
BCD tables only load in the browser
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.