Wie kann ich ein übergeordnetes Element basierend auf dem Vorhandensein eines untergeordneten Elements in CSS formatieren?

Anwenden von Stilen auf das übergeordnete Element basierend auf der Anwesenheit des untergeordneten Elements mithilfe von CSS

Bei der Arbeit mit verschachtelten Elementen kann es wünschenswert sein, Stile auf das übergeordnete Element anzuwenden basierend darauf, ob es untergeordnete Elemente enthält. CSS bietet für diesen Zweck eine begrenzte Lösung.

Verwendung des Selektors „:has()“

Der Selektor :has() kann verwendet werden, um Elemente auszuwählen, die a enthalten spezifisches untergeordnetes Element. Um beispielsweise den Stil auf ein übergeordnetes li-Element anzuwenden, wenn es ein untergeordnetes ul.sub-Element enthält:

ul li:has(ul.sub) {
    background-color: green;
}

Einschränkungen

Leider ist der Selektor :has() wird nur in CSS4 unterstützt und von Browsern nicht weit verbreitet.

Alternative mit JavaScript

Alternativ können Sie den gewünschten Effekt mit JavaScript erzielen:

$('ul li:has(ul.sub)').addClass('has_sub');

Fügen Sie dann in Ihrem CSS ein Styling für die Klasse li.has_sub hinzu.

Hinweis:

Der durchgestrichene Abschnitt in der ursprünglichen Antwort wurde mit dem $-Selektor vorgeschlagen, einem CSS4 Vorschlag, wird aber derzeit von keinem Browser unterstützt.

Das obige ist der detaillierte Inhalt vonWie kann ich ein übergeordnetes Element basierend auf dem Vorhandensein eines untergeordneten Elements in CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!