Выбор последнего видимого div с помощью CSS: селекторы

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

Чтобы выбрать последний видимый div с использованием CSS, примените псевдо-класс :not() вместе с селекторами атрибутов, чтобы исключить скрытые div:

div:not([style*="display: none"]):not([hidden]):last-of-type {
  /* Ваши CSS-стили */
}

Если элементы меняют свою видимость динамически, примените JavaScript для фильтрации видимых div:

let lastVisibleDiv = Array.from(document.querySelectorAll('div'))
                          .reverse()
                          .find(div => window.getComputedStyle(div).display !== 'none');

Улучшение CSS с помощью JavaScript

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

function getLastVisibleDiv() {
  return Array.from(document.querySelectorAll('div'))
              .reverse()
              .find(div => div.offsetParent !== null);
}

// Пример использования
let lastVisibleElement = getLastVisibleDiv();
// Применяем стиль
if (lastVisibleElement) {
  lastVisibleElement.classList.add('highlight');
}

Здесь мы используем свойство offsetParent, позволяющее определить, является ли элемент видимым, и гарантировать получение точных данных, в отличие от метода с определением через стили или CSS свойства.

CSS и JavaScript: Динамика в действии

Объединение CSS и JavaScript — стратегия выбора при работе с динамическим контентом. Давайте подробнее рассмотрим их взаимодействие в контексте выбора видимых элементов.

Адаптация к изменениям видимости

Встроенные стили и селекторы атрибутов эффективны, пока содержимое остается статичным. Когда содержимое начинает изменяться, лучше использовать JavaScript для полного контроля над отображением элементов.

Наслаждаемся мощью jQuery

Для тех, кто знаком с jQuery, код поиска последнего видимого div сводится к одной строке:

let $lastVisibleDiv = $('div:visible:last');

Управление классами и идентификаторами

Использование классов и ID обеспечивает удобство при работе с JavaScript или jQuery, позволяет фокусироваться на определенной группе элементов.

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

Наш сад по-прежнему населен 🌸 (видимыми div) и 🍂 (скрытыми). Нам нужен последний цветок:

Сад: 🌸🍂🌸🍂🌸🍂🍂🍂

CSS-селектор работает как работящая пчела (🐝), которая стремится к последнему цветущему div:

div:visible:last-of-type { /* Цель пчелы */ }

Цель достигнута, задача выполнена:

Цель: 🎯(🌸)

Пчела игнорирует ненужные 🍂 div и сосредотачивается на последнем цветке 🌸 в нашем саду элементов.

Углубленные приемы

Модульность

Организуйте div в контейнере. Это упрощает выбор элементов и следует лучшим практикам структурирования HTML.

Выход за рамки видимости

Стиль CSS filter: blur(3px) может использоваться для указания на интерактивные состояния и неинвазивного улучшения пользовательского опыта.

Ограничения CSS, внимание на JavaScript

CSS-селектор [style*="display:none"] не учитывает изменения видимости, осуществляемые через классы или внешние стили. JavaScript призван компенсировать эти ограничения, обеспечивая полное отслеживание изменений видимости элементов.

Полезные материалы

1. :visible Селектор | Документация API jQuery
2. Селектор CSS :last-child
3. :nth-of-type() – CSS: Каскадные таблицы стилей | MDN
4. :not() – CSS: Каскадные таблицы стилей | MDN
5. Селекторы Уровня 4
6. :last-of-type | CSS-Tricks – CSS-Tricks
7. Как проверить, находится ли часть элемента вне видимой области экрана на чистом JS | Go Make Things