CSS Определить отсутствие tag элемента в DOM

Question

Возможно ли средствами CSS узнать что в DOM дереве нет какого-то элемента? Вот как пример (не рабочий)

body:not(h1):after {
    content: 'You forgot h1';
    color: red;
    font-weight: bold;
}

<h1></h1>

То есть, по сути, хочется видеть что забыли добавить h1, если его нету в DOM.

PS Я слышал про :has() но пока он не работает

Answer 1

Это и невозможно в актуальном стандарте CSS, и за рамками назначения стилей (которое заключается именно в стилизации элементов).

Здесь целью (желаемым результатом выполнения) является вывод текста отсутствующего в документе изначально, с императивной логикой условия (если..то) - именно поэтому, данная задача выходит за границы адекватного применения стилей.
То есть, даже будь в CSS возможность решения таких задач - возможности должны использоваться разумно, не только лишь из-за их наличия.

Задачи такого рода, подразумевающие императивное программирование, если {вычисляемое условие} то {выполнить операции с контентом документа} - следует решать средствами JS, в соответствии с ролью каждой технологии: статическому контенту следует находиться в разметке; за динамический контент и императивную логику отвечают скрипты; за внешний вид элементов отвечают стили. Следование этой простой организации имеет множество преимуществ, а ее нарушение - может приводить к множеству проблем.
Рекомендую сделать выбор в пользу преимуществ.

// Несмотря на то что CSS в ряде случаев позволяет успешно избежать использования скриптов (в задачах где естественным образом предполагается их использование) - такое избежание все же является костылем/хаком по самой сути, и не стоит забывать об этом: применяя костыли только при реальной необходимости (которая встречается все реже, благодаря постепенному развитию и стандартизации веб-технологий, а также все новым оптимизациям браузеров). Чрезмерное увлечение костылями может негативно сказаться и на UX, и на личном прогрессе веб-разработчика.

Answer 2

В CSS есть псевдокласс :empty. Таким образом, вы можете обернуть h1 в div, на котором проверите, нет ли в нём вложенных элементов:

.box {
  background: lime;
  height: 200px;
  width: 200px;
}

.box:empty:after {
    content: 'You forgot h1';
    color: red;
    font-weight: bold;
}

<div class="box"></div>
<div class="box"><h1></h1></div>

БЛОГ НА HUSL

CSS Определить отсутствие tag элемента в DOM

Ответы (2 шт):