Kann CSS übergeordnete Elemente anhand ihrer untergeordneten Elemente auswählen?

CSS-Selektor für Elemente mit einem bestimmten untergeordneten Element

Diese Frage untersucht die Möglichkeit, Elemente basierend auf dem Vorhandensein eines bestimmten untergeordneten Elements auszuwählen.

Aktuelle CSS-Einschränkungen:

Ab den aktuellen CSS-Spezifikationen (CSS2 und CSS3), dort Es gibt keine integrierte Funktion zur Durchführung der übergeordneten Auswahl. Das bedeutet, dass Sie ein Element nicht direkt auswählen können, wenn es ein bestimmtes untergeordnetes Element enthält.

Frühere Bemühungen und Vorschläge:

Ältere Entwürfe von CSS-Spezifikationen enthielten das Konzept des Selektors Subjekte, die die Auswahl eines übergeordneten Elements basierend auf seinem untergeordneten Element ermöglicht hätten. Diese Funktion wurde jedoch entfernt und ist in aktuellen CSS-Implementierungen nicht vorhanden.

Neue Funktionen:

Neuere Entwürfe von CSS-Spezifikationen, wie z. B. Selectors Level 4 Im Entwurf des Herausgebers stellen wir das Konzept der relationalen Pseudoklasse „:has()“ vor. „:has()“ bietet eine Möglichkeit, ein Element basierend auf seinem Inhalt auszuwählen.

Auswählen von Elementen mit untergeordneten Elementen mithilfe von „:has()“:

Zu Wählen Sie mithilfe von das übergeordnete Element aus, das ein bestimmtes untergeordnetes Element enthält „:has()“:

parent-element:has(child-element) {
  /* styling goes here */
}

Beispiel:

Um alle

div:has(span) {
  /* styling goes here */
}