CSS Tutorial – Die Selektoren

Was ist ein Selektor?

Bevor wir mit der Einführung der CSS-Selektoren beginnen können, sollten wir klären, was ein CSS-Selektor ist. Einfach ausgedrückt ist er eine Zuordnung im CSS zu einem Element auf der Webseite. Die diesem Selektor zugeordneten Stilregeln werden auf die Elemente angewendet, die dem Selektor entsprechen.

Selektoren sind einer der wichtigsten Aspekte von CSS, da sie es ermöglichen, bestimmte Elemente auf Ihrer Webseite gezielt anzusprechen und zu gestalten.

In CSS stehen verschiedene Arten von Selektoren zur Verfügung. Im Folgenden schauen wir uns die wichtigsten davon im Detail an.

Universal-Selektor

Der universelle Selektor, gekennzeichnet durch ein Sternchen (*), stimmt mit jedem Element auf der Seite überein. Er wird häufig verwendet, um z. B. Standardränder oder Abstände zu entfernen.

* {
    margin: 0;
    padding: 0;
}
    

Die Stilregeln im *-Selektor werden auf jedes Element im Dokument angewendet.

Element-Selektoren

Ein Element-Selektor bezieht sich direkt auf den Namen eines HTML-Elements — beispielsweise p, h1 oder div.

p {
    color: red;
}
    

Alle <p>-Elemente im gesamten Dokument erhalten die hier definierte Formatierung, unabhängig davon, wo sie sich im HTML befinden.

ID-Selektoren

ID-Selektoren beginnen mit einem # und sprechen genau ein einzelnes HTML-Element an.

#error {
    color: blue;
}
    

Hat ein Element die ID error, wird der Text blau formatiert.

Klassenselektoren

Klassenselektoren beginnen mit einem Punkt (.) und können auf beliebig viele Elemente angewendet werden.

.yellow {
    color: yellow;
}
    

Alle Elemente mit der Klasse yellow werden gelb eingefärbt.

Spezifischer: Kombination aus Element + Klasse

p.blue {
    color: blue;
}
    

Nur <p>-Elemente mit der Klasse blue werden blau – nicht jedoch andere Elemente.

Kontext-Selektoren (Nachkommen-Selektoren)

Mit Nachkommen-Selektoren können Sie Elemente formatieren, die innerhalb eines bestimmten anderen Elements liegen.

ul.menu li a {
    text-decoration: none;
}
    

Diese Regel gilt nur für Links innerhalb eines <ul class="menu">.

Kind-Selektoren

Mit > werden ausschließlich direkte Kind-Elemente ausgewählt.

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}
    

Dies wirkt sich ausschließlich auf die direkt nachgeordneten Elemente aus.

Benachbarte Geschwisterselektoren

Der Selektor + wählt das Element aus, das direkt dem vorhergehenden Geschwister folgt.

h1 + p {
    color: blue;
    font-size: 20px;
}
    

Der Absatz wird nur dann formatiert, wenn er direkt hinter dem <h1>-Element steht.

Allgemeine Geschwisterselektoren

Mit ~ werden alle folgenden Geschwister eines Elements angesprochen.

h1 ~ p {
    color: blue;
    font-size: 18px;
}
    

Alle Absätze nach dem <h1>-Element (mit gleichem Parent) werden formatiert.

Gruppierungsselektoren

Mehrere Selektoren können zusammengefasst werden, wenn sie dieselben Regeln teilen.

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}
    

Dies lässt sich effizienter schreiben:

h1, h2, h3 {
    font-weight: normal;
}
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }