Стилизация родителя в CSS по наличию дочернего элемента

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

JavaScript — это отличный инструмент для добавления классов к родительскому элементу, в зависимости от наличия у него определённых дочерних элементов. В приведённом ниже примере кода показано, как добавить класс .styled родительскому элементу, если у него присутствует потомок с конкретным селектором.

document.addEventListener('DOMContentLoaded', () => {
    const parent = document.querySelector('.parent');
    if (parent.querySelector('.child')) {
        parent.classList.add('styled');
    }
});

После этого определите стили для нового класса в CSS:

.parent.styled {
    color: #007bff; // Пример стиля
}

Вуаля! Теперь у родительского элемента отобразятся стили, в случае обнаружения у него дочернего элемента.

JavaScript приходит на помощь

JavaScript — настоящий герой во вселенной DOM (Document Object Model), позволяющий динамически изменять стили на основании определённых условий.

Как JavaScript и CSS расширяют возможности друг друга

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

const parent = document.querySelector('.parent');
if (parent.querySelectorAll('.child').length > 2) { // Если больше двух детей. 
    parent.classList.add('many-children'); // Применяем специальный стиль!
}

Теперь создайте в CSS правила для класса many-children.

.parent.many-children {
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2); // Добавляем тени!
}

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

CSS псевдокласс :has() – новые возможности... в будущем!

Псевдокласс :has() предоставляет новые способы для стилизации элементов на основе их потомков. Однако, его поддержка в браузерах на данный момент ограничена.

.parent:has(> .important-child) {
    background-color: #ffeb3b; // Выделяем цветом при наличии важного потомка.
}

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

Считайте дочерние элементы факторами, влияющими на внешний вид родительского элемента.

Структура (родитель)
  |
  |--🔵 (потомок: при его наличии применяются стили)
  |--🔴 (потомок: другие стили при его наличии)

Для каждого условия существует соответствующее CSS-правило:

.parent:has(> .child-blue) { border: 1px solid blue; }
.parent:has(> .child-red) { border: 1px solid red; }

Подобно оформлению рамы картины, которое зависит от выбранных цветов!

Работа с сложными DOM-структурами: глубокое погружение в jQuery

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

$('.parent:has(.special-child)') // Любой потомок с классом `.special-child`
    .addClass('highlight');

Затем определяем CSS для этого класса:

.parent.highlight {
    outline: 2px dashed #4caf50; // Рамка для выделения!
}

Сравнение селекторов: CSS против jQuery

Рассмотрим подходы CSS и jQuery для различных случаев:

*Функционал, которого мы ждём с нетерпением

Выбираем подходящий инструмент

CSS – Декларативность и простота

Используйте CSS, если отношение между родительским и дочерними элементами стабильно и известно заранее.

.parent:hover > .child {
    display: block; // Дети, выходите на улицу!
}

JavaScript – Для работы в динамике

Если структура DOM или его состояние изменяются, вам пригодится JavaScript:

window.addEventListener('resize', () => {
    document.querySelectorAll('.parent').forEach(parent => {
        if (window.innerWidth > 768) {
            parent.classList.add('wide-screen'); // Просторный вид для широких экранов.
        } else {
            parent.classList.remove('wide-screen'); // Сузаем взгляд при уменьшении экрана.
        }
    });
});

jQuery – Инструмент для решения сложных задач

Пользуйтесь jQuery, когда необходимо управлять сложной структурой или условно применять стили:

$(window).on('load scroll', () => {
    $('.parent:has(.in-view)').each(function() {
        if ($(this).find('.child').visible()) {
            $(this).addClass('active'); // Если потомок в поле зрения, выделяем его!
        }
    });
});

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

1. Селекторы CSS – MDN
2. Selectors Level 4
3. Существует ли в CSS родительский селектор? – Stack Overflow
4. :has() – CSS-Tricks
5. Поддержка функций в разных браузерах – Can I use
6. Руководство по сложным CSS-селекторам – Smashing Magazine
7. Использование пользовательских свойств в CSS (переменных) – MDN