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

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

  • автор:

:last-of-type

CSS псевдокласс :last-of-type находит последнего потомка с заданным тегом в списке детей родительского элемента.

/* Выбирает 

, являющийся последним элементом среди элементов своего типа среди своих соседей */ p:last-of-type color: lime; >

Примечание: В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.

Синтаксис

Error: could not find syntax for this item

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

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

Синтаксис

селектор:nth-last-child(число | odd | even | выражение) < >

Значения

Значение Описание
число Положительное число начиная с 1 . Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1 .
odd Нечетные элементы.
even Четные элементы.
выражение Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы) до бесконечности. Так, 2n — значит все четные числа (начиная со второго). Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет (нумерация элементов с 1), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент. Если написать 3n — это будет каждый третий элемент (начиная с третьего), и так далее.

Пример

В данном примере мы сделаем красного цвета тот li , который является 4 -тым с конца потомком своего родителя:

  • list item
  • list item
  • list item
  • list item
  • list item

Пример

Сейчас красными сделаем все четные с конца li :

  • list item
  • list item
  • list item
  • list item
  • list item

Пример

Сейчас красными сделаем все нечетные с конца li :

  • list item
  • list item
  • list item
  • list item
  • list item

Пример

Сейчас красными сделаем каждую третью с конца li :

  • list item
  • list item
  • list item
  • list item
  • list item

Document.querySelectorAll()

Метод querySelectorAll() Document возвращает статический (не динамический) NodeList , содержащий все найденные элементы документа, которые соответствуют указанному селектору.

Примечание: Данный метод реализован на основе миксина ParentNode querySelectorAll() метода.

Синтаксис

= document.querySelectorAll(selectors); 

Параметры

Строка DOMString , содержащая один или более CSS селектор (en-US) . Эта строка должна быть валидным CSS селектором. Если это не так, то генерируется SyntaxError . Смотрите Поиск элементов DOM с использованием селекторов для получения информации о том, распознавать элементы. Несколько селекторов нужно разделить запятыми.

Примечание: Символы, которые не являются частью стандартного синтаксиса CSS, должны быть экранированы с помощью символа обратной косой черты ( \ ). Поскольку в JavaScript также используется экранирование обратной косой черты, при написании строковых литералов с использованием этих символов следует соблюдать особую осторожность. Для более подробной информации смотри Escaping special characters.

Возвращаемое значение

Статический (non-live) NodeList , содержащий все элементы в пределах документа, которые соответствуют как минимум одному из указанных селекторов, или пустой NodeList в случае отсутствия совпадений.

Примечание: Если в строке selectors содержатся CSS псевдоэлементы, то возвращаемый список будет всегда пуст.

Исключения

Исключение SYNTAX_ERR происходит в случае передачи некорректной группы селекторов.

Примеры

Получение списка совпадений

Чтобы получить NodeList всех элементов в документе:

var matches = document.querySelectorAll("p"); 

В этом примере возвращается список всех элементов в документе, которые имеют класс note или alert :

var matches = document.querySelectorAll("div.note, div.alert"); 

Здесь мы получаем список элементов

, чьим непосредственным родительским элементом является с классом highlighted , который расположен внутри контейнера с идентификатором test .

var container = document.querySelector("#test"); var matches = container.querySelectorAll("div.highlighted > p"); 

В этом примере используются селекторы атрибутов, чтобы вернуть список элементов (en-US), которые содержат атрибут data-src :

var matches = document.querySelectorAll("iframe[data-src]"); 

Здесь селектор атрибута используется для возврата элементов списка, содержащихся в списке с идентификатором «userlist» , который имеет атрибут «data-active» со значением «1» :

var container = document.querySelector("#userlist"); var matches = container.querySelectorAll("li[data-active='1']"); 

Доступ к совпадениям

Вернув NodeList совпадений один раз, вы можете использовать его как простой массив. Если массив пустой (т. е. свойство length равно 0), то совпадений не было найдено.

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

var highlightedItems = userList.querySelectorAll(".highlighted"); highlightedItems.forEach(function (userItem)  deleteUser(userItem); >); 

Примечания пользователя

querySelectorAll() ведёт себя не так, как большинство библиотек JavaScript DOM. Это может привести к неожиданным результатам.

HTML

Рассмотрим этот HTML с тремя вложенными блоками.

div class="outer"> div class="select"> div class="inner">div> div> div> 

JavaScript

var select = document.querySelector(".select"); var inner = select.querySelectorAll(".outer .inner"); inner.length; // 1, не 0! 

В данном примере, когда мы выбрали «.outer .inner» в контексте с классом «select» , элемент с классом «.inner» был всё равно найден, хотя .outer не является потомком элемента в котором происходил поиск ( «.select» ). По умолчанию, querySelectorAll() проверяет только последний элемент без учёта контекста.

Псевдокласс :scope (en-US) даёт нам ожидаемый результат. Только соответствующие селекторы в потомках базового элемента:

var select = document.querySelector(".select"); var inner = select.querySelectorAll(":scope .outer .inner"); inner.length; // 0 

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

Specification
DOM Standard
# ref-for-dom-parentnode-queryselectorall①

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

BCD tables only load in the browser

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

  • Element.querySelector() and Element.querySelectorAll()
  • Document.querySelector()
  • DocumentFragment.querySelector() (en-US) and DocumentFragment.querySelectorAll() (en-US)
  • ParentNode.querySelector() and ParentNode.querySelectorAll()
  • Code snippets for querySelector

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 3 авг. 2023 г. 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.

CSS-селектор :not. Полезные примеры

В спецификации и блогах про селектор :not обычно приводят какие-то искусственные примеры, которые хоть и объясняют синтаксис и принцип действия, но не несут никакой идеи о том, как получить пользу от нового селектора.

p:not(.classy) < color: red; > 

Ну окей, думаю я, в моей практике не встречались такие ситуации. Обходились мы ведь как-то раньше без :not . Приходилось немного переписать структуру селекторов или обнулить пару значений.

Пример 1. Элемент без класса

Селектор :not может быть крайне полезен, когда нам нужно застилить контент сгенерированный пользователем (нет возможности расставить в нем классы), или когда у нас контента очень много и расставлять в нем классы слишком трудоёмко.

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li . Мы пишем код:

ul li < /* наши красивые стили */ > 

В результате, наши красивые буллиты появляются не только в контенте, но и, например, в навигации, где тоже используются ul li .

Мы ограничиваем область действия селектора:

.content ul li < /* красота */ > 

Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри .content , где тоже используются ul li .

Далее у нас варианты:

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит « DRY » и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

2) пойти от обратного и ставить класс всем спискам, которые нужно стилизовать:

.textlist li < /* красота */ > 

Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит.

3) стилизовать только те ul li , у которых нет никаких классов вообще:

ul:not([class]) li < /* красота */ > 

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

Этот прием — «выбирать только элементы без класса» — очень полезен для оформления пользовательского контента и его можно применять не только к спискам, но и для других случаев.

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров.

/* с перезаписью свойств */ ul:hover li < opacity:0.5; > ul:hover li:hover < opacity:1; > 

Но если придется обнулять слишком много свойств, то есть смысл использовать :not .

/* используя :not() */ ul:hover li:not(:hover) < opacity:0.5; > 

Пример 3. Меню с разделителями между элементами

Меню с разделителями между элементами

Как и в предыдущем примере, желаемого можно добиться несколькими способами.

Через перезапись свойств. Но тут два правила вместо одного, что не есть « DRY ».

.menu-item:after < content: ' | '; > .menu-item:last-child:after < content: none; > 

Через :nth-last-child() . Одно правило, но тяжело читается.

.menu-item:nth-last-child(n+2):after < content: ' | '; > 

Через :not() — самая короткая и понятная запись.

.menu-item:not(:last-child):after < content: ' | '; > 

Пример 4. Debug css

Удобно для отладки и самоконтроля искать/подсвечивать картинки без alt, label без for и другие ошибки.

/* подсвечиваем теги без необходимых атрибутов */ img:not([alt]), label:not([for]), input[type=submit]:not([value]) < outline:2px solid red; > /* тревога, если первый child внутри списка не li и прочие похожие примеры */ ul > *:not(li), ol > *:not(li), dl > *:not(dt):not(dd) < outline:2px solid red; > 

Пример 5. Поля форм

Раньше текстовых полей форм было не много. Достаточно было написать:

select, textarea, [type="text"], [type="password"] < /* стили для текстовых полей ввода */ > 

С появлением новых типов полей в HTML5 этот список увеличился:

select, textarea, [type="text"], [type="password"], [type="color"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="month"], [type="week"] < /* стили для текстовых полей ввода */ > 

Вместо перечисления 14 типов инпутов можно исключить 8 из них:

select, textarea, [type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) < /* стили для текстовых полей ввода */ > 

Ладно, этот пример не очень красив, и я рекомендую всё же первый вариант с перечислением, он работает с IE8+, а второй вариант с IE9+.

Поддержка

Следует заметить, что согласно спецификации в скобках селектора :not() может стоять только простой селектор и в скобках нельзя использовать сам селектор :not() . Если нужно исключить несколько элементов, :not() можно повторить несолько раз, как в примере 5.

Если очень нужны CSS3-селекторы в браузерах, которые их не поддерживают, можно использовать полифил selectivizr.

© Павел Радьков 2014.

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

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