Selektoren in CSS

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 ....(?) ermöglicht.

• 

  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

   
• dynamische Pseudoklassen

  (Besserer Titel gesucht!)

  •  :is(), :where()
  •  :has()
  •  :not()
   
• 

  Schachtelung von Regeln

  CSS Präprozessoren, nehmt euch in Acht!

   

Siehe auch

• CSS-Selektoren
  Referenz für den schnellen Überblick
   
• 

  Links

  Gestaltung mit CSS

  •  :hover und :focus
  •  :focus-within
  •  :visited, :link, :any-link
   
• 

  Formulare validieren
  •  :valid, :invalid
  •  :in-range, :out-of-range