Как обратиться к последнему элементу css
Перейти к содержимому

Как обратиться к последнему элементу css

  • автор:

Свойство lastElementChild

Свойство lastElementChild хранит в себе последний дочерний элемент. Дочерними элементами считаются все теги, которые непосредственно расположены внутри блока. Если у элемента нет дочерних элементов — возвращается null .

Синтаксис

элемент.lastElementChild;

Пример

Получим содержимое последнего потомка элемента:

1

2

let parent = document.querySelector(‘#parent’); let text = parent.lastElementChild.textContent; console.log(text);

Результат выполнения кода:

Пример

А теперь у элемента нет дочерних элементов и поэтому выведется null :

let parent = document.querySelector(‘#parent’); console.log(parent.lastElementChild);

Результат выполнения кода:

Смотрите также

  • свойство firstElementChild ,
    которое содержит первый элемент
  • свойство children ,
    которое содержит всех потомков элемента
  • свойство lastChild ,
    которое содержит последний узел

Как убрать отступ у последнего элемента css

Для того, чтобы убрать отступ у последнего элемента, например в списке, можно воспользоваться псевдоклассом :last-child .

Рассмотрим пример. Имеется маркированный список, в правилах css задан отступ снизу у каждого элемента li в 10px;

  123 456 789  
li  margin-bottom: 10px; > 
li  margin-bottom: 10px; > li:last-child  margin-bottom: 0px; > 

:nth-last-child

CSS псевдокласс :nth-last-child(an+b) находит элемент, имеющий an+b-1 потомков после данной позиции в дереве документа, значение для n может быть положительным или нулевым, а также имеющий родительский элемент.

В результате, он функционирует так же, как и :nth-child , кроме того, что выбирает элементы, считая в обратном порядке, с конца списка потомков, не с начала.

Смотрите :nth-child для более тщательного описания синтаксиса его аргументов.

Синтаксис

element:nth-last-child(an + b)

Примеры

Пример селекторов

Находит последние 4 строки HTML таблицы.

Ищет чётные элементы в родительском элементе, начиная с последнего элемента и работая задом наперёд.

Использование

table  border: 1px solid blue; > tr:nth-last-child(-n + 3)  /* последние 3 потомка */ background-color: lime; > 
table> tbody> tr> td>Перваяtd> tr> tr> td>Вторая строкаtd> tr> tr> td>Третьяtd> tr> tr> td>Четвёртаяtd> tr> tr> td>Пятая строчкаtd> tr> tbody> table> 

. будет выглядеть, как :

Спецификации

Specification
Selectors Level 4
# nth-last-child-pseudo

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Псевдоэлемент after и псевдокласс last-child

Псевдоэлемент after и псевдокласс last-child

Для верстальщика псевдоэлементы и псевдоклассы – незаменимые помощники и я вам это сейчас докажу на примере фрагмента PSD макета.

Псевдоэлемент after и псевдокласс last-child.

Дизайнеры очень любят разделять пункты меню разными символами, ставя в тупик неопытных верстальщиков. Начинающий верстальщик, наверняка попался бы на удочку и вслед за текстом, понатыкал бы разделители.

В результате мы увидели бы следующую разметку в HTML-документе, как на картинке ниже.

Псевдоэлемент after и псевдокласс last-child.

Такой нехитрый способ конечно же работает, но он сильно засоряет код, а практической пользы для семантики от кучи span-ов, никакой нет.

Правильный способ

В HTML коде не нужно вообще, как-то проставлять вертикальные линии. Теперь, мы считаем их псевдоэлементами, а все дальнейшие действия происходить будут в CSS стилях.

Псевдоэлемент after в CSS стилях

Мы видим определенную закономерность, что за каждым пунктом меню, стоит разделитель, значит применяться псевдоэлемент after будет к тегу li.

Символ вертикальная линия имеет следующий код — «\007C». Откуда мы узнали? Из таблицы символов Юникода.

Псевдоэлемент after и псевдокласс last-child.

Не забудьте убрать дефолтные стили маркеров, круглые точки!

nav ul list-style: none;
>

Запишем номер в Юникоде в свойство content.

nav ul li::after content: «\007C»; /* юникод вертикальная линия */
color: #fff; /* поменять цвет */
font-weight: bold; /* поменять жирность */
position: relative;
padding-left: 4px; /* выравнивание относительно текста по гориз. */
top: -2px; /* выравнивание относительно текста по верт. */
>

Вертикальные линии встали, как мы и хотели, за исключением последнего. Дело в том, что на макете нет последнего разделителя и на этот случай, то же есть элегантный псевдо-выход.

Псевдоэлемент after и псевдокласс last-child.

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

Псевдокласс last-child позволяет задать отдельные стили для последнего элемента, в нашем случае – для последнего псевдоэлемента. Мы просто указываем пустое значение у свойства content и последняя линия пропала.

nav ul li:last-child::after <
content: «»;
>

Псевдоэлемент after и псевдокласс last-child.

Заключение

Для использования символов Юникода, кодировка страницы должна обязательно быть UTF-8.

Как понять, в каком случае нужно верстать с псевдоэлементами? Все элементы оформления и украшательства, находящиеся до или после основных элементов. Сейчас редко какой дизайн-макет обходится без необходимости, применять в верстке псевдоэлементы и псевдоклассы.

В этогм видео-курсе «HTML5 и CSS3 с Нуля до Гуру»вы увидите на простых примерах, как верстаются сайты.

Создано 18.01.2019 10:35:15

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *