CSS псевдо-класс, как: пусто, но также игнорирует скрытых детей

Question

:empty псевдокласс представляет любой элемент, у которого вообще нет дочерних элементов. Существует ли подобный псевдокласс, представляющий любой элемент, который не имеет видимых дочерних элементов (игнорируя дочерние display установлен в none)?

Если для этого не существует псевдокласса, есть ли способ выполнить эту фильтрацию с помощью CSS?

Answer 1

Выбор CSS - это однонаправленное дерево. Как только вы приступаете к детям, вы больше не можете действовать на родителя.

Вы должны проверить на display: none; собственность на всех детей, чтобы знать, если они все скрыты или нет. Вы можете выбрать всех скрытых детей следующим образом: <parent tag> *[display=none], Однако нет никакого способа узнать, все ли дочерние элементы скрыты, и нет никакого способа повторно выбрать родителя после того, как вы определили скрытые дочерние элементы.

Для этого вам нужно будет использовать JavaScript. Смотрите это: проверьте, все ли дочерние элементы скрыты

Answer 2

С новым селектором css:has()вы можете сделать что-то вроде этого:

      parent:has(children[style*="display: none"])

где родитель — это селектор контейнера, а дочерний элемент — селектор элемента, для которого выполняется проверка отображения.