CSS/Tutorials/Selektoren

Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren.

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. Der Selektor ist somit der Teil vor den geschweiften Klammern.

Beispiel

Selektor { /* CSS-Deklarationen */ }

1. einfache Selektoren
   • Universalselektor
   • Typselektoren: element
   • Klassenselektoren: .class
   • ID-Selektoren: #id
   • Attributselektoren
     • Attributpräsenz: [a]
     • Attributwert: [a=v], [a~=v], [a|=v]
     • Teilübereinstimmung: [a^=v], [a$=v], [a*=v]
2. Kombinatoren
   • Kindselektor: e > f
   • Nachfahrenselektor: e f
   • Nachbarselektor: e + f
     • lobotomized owl selector: *+*
   • Geschwisterselektor: e ~ f
3. Pseudoelemente
   • ::first-line, ::first-letter
   • ::before, ::after
   • ::backdrop
   • ::selection
   • ::placeholder
   • ::part
4. Strukturelle Pseudoklassen
   •  :root, :empty
   •  :first-child
   •  :last-child
   •  :nth-child()
   •  :nth-last-child()
   •  :only-child
   •  :first-of-type
   •  :last-of-type
   •  :nth-of-type()
   •  :nth-last-of-type()
   •  :only-of-type
5. Dynamische Pseudoklassen
   • dynamische Pseudoklasse
     •  :hover, :active, :focus
     • target
     •  :any-link, :link, :visited
     •  :disabled, :enabled, :checked
     •  :valid, :invalid
     •  :in-range, :out-of-range
   • funktionale Pseudoklassen
     •  :is(), :not()
     •  :lang()
6. Schachtelung: &

• einfache Selektoren

Siehe auch

• alle Selektoren im Überblick (alphabetische Referenz)