Выбор последнего видимого 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