Можно ли в CSS проверить содержит ли один класс внутри себя другой класс?

Question

[Антон]

.first {
	.second {
		/* ... */
	}
}

<div class="first">
	<div class="second"></div>
</div>

Можно ли как-нибудь без JS, на чистом CSS написать для класса first правило, что, если он внутри себя будет содержать класс second, то применить такие-то свойства?

Конкретно я хочу сделать следующее:
Если блок first не содержит в себе блок second, то применяются дефолтные свойства.
Но если вдруг в блоке first появляется блок second, то применить такие-то свойства поверх дефолтных.

Answer 1

[Николай]

Все свойства идут каскадом (отсюда и название).
Как следствие - ребенок на родителя оказать влияние не может.

Answer 2

[riot26]

На чистом CSS на сегодняшний день нельзя, на jQ как-то так:
$('.first:has(.second)').addClass('has_second');

.first { ... }
.second { ... }
.has_second { ... }

Answer 3

[Сергей Семенко]

.first > .seconds {
    ...
}

Или я не понял

Comments

[riot26]

здесь будут стили для .second, который внутри .first, а нужно .first, в котором внутри есть .second

[Сергей Семенко]

riot26: понял, тогла никак.

[Сергей Семенко]

riot26: только JS, как уже сказали выше.

Answer 4

[Владимир]

Уже можно на css:

.first:has(.second) {
...
}

Comments

[Александр Леон-Булатов]

Да... Было бы здорово, если бы он уже стал реализован во всех браузерах, но на данный момент ( май 2023 года ) его ещё нельзя использовать.