Relationale CSS-Pseudoklasse :has()
19.10.2022, 16:11 Uhr
Ein ganz besonderer Fall
Die Pseudoklasse :has() ist mehr als ein Parentselektor und macht CSS deutlich mächtiger.
(Quelle: Shutterstock)
Auf den ersten Blick scheint die Einführung eines neuen Selektors in CSS nichts besonders Weltbewegendes zu sein – aber :has() ist ein ganz besonderer Fall. Der Artikel führt allgemein in das Thema Parentselektor ein, zeigt dann, warum :has() so viel mehr ist als das und wofür man diesen Super-Selektor nutzen kann.
Der Selektro :has() in Kombination mit Pseudoklassen wie :valid/:invalid macht es beispielsweise möglich, ein label-Element in Abhängigkeit der Zustandsänderung eines input-Elements umzuformatieren.
Wie das konkret funktioniert, wird im folgenden Artikel an zahlreichen Beispielen gezeigt. Außerdem erfahren Sie, wie Sie Raster je nach Anzahl der Elemente anders aufbauen können und wie sich ein Theme-Switcher dank :has() mit CSS pur umsetzen lässt. Im klassischen CSS können wir darüber hinaus ein Element auswählen, und zwar in Abhängigkeit davon, wo es steht:
Jetzt 1 Monat kostenlos testen!
Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
- + Digitales Kundenkonto,
- + Zugriff auf das digitale Heft,
- + Zugang zum digitalen Heftarchiv,
- + Auf Wunsch: Weekly Newsletter,
- + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar
