Выбор последнего элемента с классом в CSS, не last-child

Быстрый ответ

Для выбора последнего элемента с определённым классом следует использовать метод querySelectorAll из JavaScript:

let lastElement = document.querySelectorAll('.your-class').item(-1); // Изящно выбираем последний!

Замените '.your-class' на интересующий вас класс, чтобы мгновенно обратиться к последнему элементу с данным классом.

В поисках исключительно CSS-решения

К сожалению, ограничиваясь только CSS, напрямую выбрать последний элемент с определённым классом, не являющийся последним в контейнере, нам не получится. Добро пожаловать в мир тонких выборок.

Визуализация

Представьте данные как ряд разнообразных деревьев (🌳🌲🌴). Вам требуется последняя сосна (🌲), не учитывая последнее дерево в этой серии:

Ряд: 🌳🌲🌴🌲🌳🌲🌴🌳

Селектор :last-of-type сфокусирован на последнем дереве на всем протяжении:

🌳🌲🌴🌲🌳🌲🌴🌳👀 – ‘last-of-type’ выберет именно это дерево.

Однако нам необходима последняя сосна (🌲), не считая её последним потомком:

🌳🌲🌴🌲🌳👀🌲🌴🌳 – Последняя 🌲 с уникальным 'классом'!

Таким образом, стратегический подход поможет достичь цели.

Многослойный подход: разбирательство с работой селекторов

Заблуждения относительно :last-of-type

:last-of-type, хотя и кажется подходящим для данной задачи, выбирает последний элемент типа, однако не класса. Это непригодно для поиска элементов с .comment, которые могут быть применены к различным тегам, например <article>.

Подробнее об этом расскажет наш спикер на видео

Преграды с поддержкой браузера для селектора :has()

Селектор :not(:has(~ .your-class)) элегантен, он означает "выбрать элементы, не имеющие последующих соседей с .your-class". Однако у него возникают проблемы с поддержкой браузеров и он не универсален.

Следите за обновлениями поддержки браузеров

Следите за обновлениями в поддержке браузеров селекторами, такими как :nth-last-child и :has(), на удобном веб-сайте caniuse.com. Учтите, что несмотря на то, что Safari хорошо поддерживает :nth-last-child(1 .your-class), он остаётся исключением.

Изучение альтернативных стратегий в CSS

Если CSS напрямую не решает проблему, стоит рассмотреть альтернативные стратегии:

Изменение порядка с помощью float

Преобразуйте макет, применив float: right; в CSS, что перестроит визуальный порядок элементов. Используя селектор соседнего элемента (+), можно устремиться на последний экземпляр класса, который буквально выступит первым.

Комбинация псевдоклассов

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

Преимущества гибкости JavaScript

В то время как с CSS могут возникать трудности, JavaScript часто предлагает альтернативные подходы. document.querySelectorAll('.your-class').item(-1) гарантирует достижение цели, минуя ограничения CSS-селекторов.

Эволюция спецификаций CSS

Черновики спецификаций, подобные Selectors Level 4, постоянно развиваются. Возможно, будущие обновления позволят напрямую выбирать последний элемент с определённым классом при помощи CSS.