Die in dem nachfolgenden Artikel genannten Code-Beispiele sind mit Bricks und Divi und entsprechenden Browsern (Chrome, Edge, Firefox, Safari, Opera und noch weiteren) getestet worden. Sie funktionierten ohne Probleme – Ausnahme: siehe bei Browser-Support.
Eine der interessantesten Pseudoklassen, die CSS in den vergangenen Jahren hinzugefügt wurde, ist “:has”. Sie ermöglicht leistungsfähigere und komplexere CSS-Selektoren.
“:has” ist eine so genannte CSS-Pseudoklasse, die verwendet werden kann, um ein Element (target) basierend auf der Bedingung eines anderen Elements (selector) auszuwählen. Damit ist es möglich, übergeordnete oder gleichgestellte Elemente in Abhängigkeit der Bedingung des “selectors” zu verändern.
Die Syntax von “:has” entspricht der von anderen Pseudoklassen wie z.B. “:hover” oder “:active”. Die Pseudoklasse “:has” wird, wie im Beispiel zu sehen, durch die Funktion “:has()” angesprochen.
target:has(selector) { /* … */ }Angenommen, es gibt eine Liste von Artikeln, und jeder Artikel hat eine Überschrift und einen Hauptteil. Man kann die Pseudoklasse “:has” verwenden, um nur die Artikel auszuwählen, die ein bestimmtes Wort in ihrem Inhaltsbereich enthalten.
Hier ist ein Beispiel für die Verwendung der Pseudoklasse “:has”:
article:has(p:contains("CSS")) {
background-color: #e6f9ff;
}Im Beispiel wird die Pseudoklasse “:has” verwendet, um nur diejenigen “article”-Elemente auszuwählen, die ein “p”-Element mit dem Wort “CSS” enthalten. Die Hintergrundfarbe dieser ausgewählten Artikel wird auf “#e6f9ff” gesetzt.
Die Pseudoklasse “:has” kann mit weiteren Selektoren kombiniert werden, um komplexere Auswahlen zu erzeugen. Zum Beispiel kann die Pseudoklasse “:has” in Kombination mit der Pseudoklasse “:not” verwendet werden, um Artikel auszuwählen, die einen Artikel mit einem bestimmten Selektor enthalten, aber keinen anderen Artikel mit einem anderen Selektor.
Beispiel:
div:has(p:not(.warung)) {
background-color: #e6f9ff;
}
Hier wird die Pseudoklasse “:has” verwendet, um nur die “div”-Elemente auszuwählen, die ein “p”-Element enthalten, das nicht die Klasse “.warnung” hat. Die Hintergrundfarbe der ausgewählten “div”-Elemente wird dann auf “#e6f9ff” gesetzt.
Es ist auch möglich, mehrere Selektoren, kommasepariert, anzugeben. Auch die Verwendung der von CSS bekannten Kombinatoren:
- Kind-Element = >
- Nachfahre-Element = Leerzeichen (space)
- Nachbar-Element = +
- Geschwister-Element = ~
ist möglich.
Einschränkungen und Vorteile
Einschränkungen
- siehe bei Browser-Support
- “:has” ist ein so genannter unversöhnlicher Selektor. Sollte also ein Element in der Sektorenliste nicht stimmen (z.B. Tippfehler), funktioniert die gesamte Abfrage nicht mehr. Unter https://css-tricks.com findet sich dazu ein Workaround bei Verwendung von “:is” und “:where”.
Vorteile
- Seine Spezifität wird durch das spezifischste Element in seiner Argumentliste bestimmt.
- “:has” kann die Leistung einer Website verbessern. Da sie es Entwicklern ermöglicht, effizienteren CSS-Code zu schreiben, wird die Website schneller geladen und ist reaktionsschneller. Interessant für Websites, die viele Inhalte und komplexe HTML-Strukturen haben.
Browser-Support
Firefox fehlt (noch)
Die “:has”-Pseudoklasse wird aktuell von allen großen Browsern unterstützt, mit Ausnahme von Firefox. Mozilla hat aber angekündigt, die Implementierung bis Mitte 2023 schaffen zu wollen (bisher muss zur Verwendung von “:has” in der Config von Firefox eine entsprechende Flag aktiviert werden – “layout.css.has-selector.enabled”.
Update
Am 19.12.2023 hat Firefox die Version 121.0 veröffentlicht. In dieser Version wurde jetzt auch :has voll implementiert und wird vollständig unterstützt. Die bisher notwendige Änderung in der Config von Firefox ist damit nicht mehr notwendig. Damit unterstützen jetzt alle großen Browser :has.
Fallback
Es ist daher noch wichtig, eine entsprechende Fallback-Lösung zu implementieren. Dies kann durch Abfrage über “@supports” geschehen.
Beispiel für “@supports”-Abfrage:
@supports selector(:has(+ *)) {
/* entsprechender Code */
}
Unten auf der Seite finden sich 2 Beispiele. Wenn dieser Artikel in Firefox geöffnet wird, sind die Blöcke der “H-tags” nur grau bzw. hellgrau. Hier greifen die Einstellungen, die nach “@supports” kommen, also nicht.
Ich habe die Beispiele unten auch auf mobilen Geräten getestet (Apple iPhone und Samsung Tablet – jeweils mit Chrome). Dort funktionierten Sie ohne Probleme.
Wer sich bzgl. der Unterstützung der Browser von “:has” weiter informieren möchte, kann sich die Seite https://caniuse.com anschauen.
Fazit
Insgesamt ist die Pseudoklasse “:has” nach meiner Meinung eine wertvolle Erweiterung von CSS. Sie ermöglicht komplexere Selektionen basierend auf dem Vorhandensein anderer Elemente innerhalb eines Elements. Sie ist ein hilfreiches Werkzeug für alle, die dynamischere und reaktionsfähigere Websites erstellen möchten.