Die wichtigsten Selektoren in CSS

Stern Selektor

Einer der grundlegendsten Selektoren in CSS ist der * -Selektor. Mit diesem Selektor können beliebige Elemente einer Seite ausgewählt werden:

* {
    margin: 0;
    ...
}

Der Selektor wird häufig eingesetzt um margin oder padding (und auch andere Attribute) zu normalisieren, weil unterschiedliche Browser hier häufig verschiedene Werte verwenden.

Der * Selektor kann natürlich mit anderen Selektoren verschachtelt werden, zB. div * { ... } um alle Elemente aller div Knoten auszuwählen.

ID Selektor

Der ID Selektor #ID dient um einen bestimmten Knoten mit einer eindeutigen id zu selektieren, zB. <div id="test"></div>

#test { ... }

Class Selektor

Jedes HTML Element kann ein class Attribut haben. Mit dem Klassen-Selektor können dann solche Elemente gezielt ausgewählt werden, zB. <div class="test"></div>

.test { ... }

Bei dem Klassen-Selektor wird im Css einfach ein Punkt vor dem Namen der Klasse gesetzt.

Element Selektor

Elementen Selektor dient zur Auswahl ganzer HTML Elemente, zB. h1 { font-size: 1rem } . Dieser Selektor kann auch verschachtelt werden zB.

article h1 { font-size: 1.2rem }

In diesem Beispiel werden nur h1 Elemente, die innerhalb eines <article>...</article> Knoten vorkommen, selektiert.

Pseudoklassen Selektoren

Über Pseudoklassen können Elemente selektiert werden, die eine bestimmte Eigenschaft besitzen. Man unterscheidet grundsätzlich zwischen strukturellen (durch Anordnung der Elemente) und dynamischen (durch eine dynamische Eigenschaft) Pseudoklassen.

Zu den am häufigsten benutzen Pseudoklassen gehören:

• :first-child erstes Kind-Element
• :last-child letztes Kind-Element
• :nth-child() n-tes Kind-Element, zB. :nth-child(odd) oder nth-child(2n+1) für alle ungeraden Kind-Elemente
• :first-of-type() erstes Kind-Element eines bestimmten Types
• :last-of-type letztes Kind-Element eines bestimmten Types
• :nth-of-type() n-tes Kind-Element eines bestimmten Types
• :visited besuchte Link Elemente
• :hover, :active, :focus von Mauszeiger erfasste Elemente, gerade angeklickte Links, Elemente mit Fokus
• :disabled, :checked gesperrte Elemente (zB. button), ausgewählte Elemente (zB. checkbox)
• :after, :before geben die Möglichkeit Inhalte um die Selektieren Elemente (vor bzw. nach dem Element) zu erzeugen

Benachbarter ("+" und "~") Selektor

Mit "+" wird nur das Element ausgewählt, dem das vorherige Element unmittelbar vorausgeht:

<ul> ...</ul><p>yellow</p>

ul + p {
   color: yellow;
}

Der "~" Selektor ist weniger strikt und wählt alle nachfolgenden Elemente eines bestimmten Knoten:

<ul> ...</ul><p>yellow</p><p>yellow</p><p>yellow</p>

Erstes Kind-Element ">" Selektor

Es wird nur das Element ausgewählt, das ein erstes Kind-Element eines übergeordnetes Element ist: <div><span> ... </span></div>

div > span { ... }

Attribut-Selektoren

Mit dem Attribut-Selektoren können alle Elemente gewählt werden, die diesen Attributen besitzen, zB:

a[title] { ... }

um alle Link-Elemente mit einem title auszuwählen.

Man kann auch den Wert des Attributs spezifizieren um die Selektion weiter einzuschränken. Zusätzlich ist es möglich mit einem "*" anzugeben, dass der gesuchte Wert an beliebiger Stelle in dem Wert des Attributs vorkommen kann. Mit "$" bzw. "^" kann man angeben, dass der Wert am Ende oder am Anfang des Attributwertes vorkommt:

a[title="Link-Title"] { ... }
a[title*="Title"] { ... }
a[href$=".png"] { ... }
a[href^="https"] { ... }

Negation Selektor

Ermöglicht die Auswahl aller Elemente, die nicht zu dem in den Klammern angegebenen Auswahlkriterium passen, zB.

p:not(#foobar) {
    font-weight: bold;
}

Für alle Paragraph-Element außer einem mit der ID #foobar