Selektoren in CSS
Aus SELFHTML-Wiki
HTML-, SVG und MathML-Elemente können mit CSS-Eigenschaften formatiert werden.
Besser ist es, diese Formatierungen zentral in einem Stylesheet zu notieren. Ein CSS-Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Regelsatz an CSS-Deklarationen auf das Element angewendet wird.
Diese Reihe bietet einen Einstieg und zeigt in weiteren Kapiteln, wie CSS immer mehr Gestaltungsmöglichkeiten eröffnet, komplexere Layouts erlaubt und interaktive Effekte unterstützt.
- Einstieg
- einfache Selektoren
- Attributselektoren
- Attributpräsenz [a]
- Attributwert: [a=v], [a~=v], [a|=v]
- Teilübereinstimmung [a^=v], [a$=v], [a*=v]
- Kombinatoren
- Kindselektor: e > f
- Nachfahrenselektor: e f
- Nachbarselektor: e + f
- Geschwisterselektor: e ~ f
- Pseudoelemente
Elemente nur mit CSS erzeugen
- ::after, ::before
- ::backdrop
und mehr …
- strukturelle Pseudoklassen
Elemente aufgrund ihrer Position im DOM selektieren
- Logische Pseudoklassen
- :is(), :where()
- :not()
- :has()
- Schachtelung von Regeln
CSS Präprozessoren, nehmt euch in Acht!
Siehe auch
- CSS-Selektorenalphabetische Referenz für den schnellen Überblick
- Links
Maus- und Tastaturinteraktionen
- :hover und :focus
- :focus-within
- :visited, :link, :any-link
- Akkordeon mit <details>
- :open
- :details-content
- Formulare validieren
- :valid, :invalid
- :in-range, :out-of-range
- Auswahllisten
- :checked, indeterminate
- :picker(select)
- Ausgrauen: readonly vs disabled
- :disabled
- :read-only, :red-write
