Nützliche Tricks und Techniken für Selektoren 16.09.2021, 08:21 Uhr

Gut gewählt

Selektoren und die Auswahloptionen sind eine der großen Stärken von CSS.
(Quelle: mozilla.org)
Wenn man über die Möglichkeiten von CSS spricht, denkt man oft an Layouttechniken, Animationen und schicke Effekte – dabei sind die Selektoren und die Auswahloptionen eine der großen Stärken von CSS. Zudem entwickelt sich dieser Bereich ständig weiter. Der Artikel zeigt Ihnen weniger bekannte und neuere Selektoren. Sie erfahren, wie Sie das ::backdrop-Pseudoelement nutzen, um den Hintergrund von Elementen im Vollbildmodus zu formatieren, warum :user-invalid eigentlich die bessere Pseudoklasse ist, warum wir unbedingt :has() brauchen und vieles mehr.

Selektorenarten

Es gibt einfache Typselektoren wie p zur Auswahl aller Absätze, Klassenselektoren wie .class, um gezielt Elemente mit dieser Klasse zu formatieren, und id-Selektoren (#id) zur Ansprache von Elementen mit ids. Für spezielle Sachen beispielsweise bei Formularen sind Attributselektoren praktisch. id-Selektoren sind etwas in Verruf geraten, da sie eine höhere Spezifität haben als die anderen Selektoren und sich dadurch immer durchsetzen, was zu Problemen führen kann. Dieses Problem haben Klassenselektoren nicht und sie sind es auch, die vorrangig bei Frameworks zum Einsatz kommen – zumindest soweit es die Framework-Benutzer sehen. Im Hintergrund werden jedoch auch bei Frameworks viele andere Selektoren benutzt, was man an Bootstrap gut sehen kann – dazu später noch mehr. Vieles lässt sich allerdings nicht mit Klassenselektoren bewerkstelligen und an dieser Stelle kommen die Pseudoklassen und die Pseudoelemente ins Spiel, um die es hauptsächlich in diesem Artikel geht.

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