Как проверить, есть ли родитель или нет?

Question

У меня есть две ситуации:

<div class="parent">
 <div class="content">TEXT</div>
</div>

или

<div class="content">TEXT</div>

Я хочу изменить цвет текста, если присутствует родительский класс или нет.

Я пишу этот CSS, но он не работает:

div:not(.parent) > .content{
 color: blue;
}

Как я могу решить это?

Answer 1

Это не работает, потому что во втором примере у вас нет элемента div, оборачивающего содержимое, поэтому div:not(.parent) не соответствует (.content является прямым потомком элемента body)

Либо вы пишете

:not(.parent) > .content {
   color: blue;
} 

( без определения элемента ), либо просто меняете логику: задайте базовый стиль для .content в случае отсутствия родительского элемента и переопределите стиль, если.parent существует:

.content {
  color: blue; /* no .parent */
}

.parent > .content{
  color: inherit;
}