Eines der wohl wichtigsten Konzepte in CSS sind die CSS Selektoren, die es ermöglichen, bestimmte Gruppen von HTML Elementen auszuwählen, also zu selektieren und im Anschluss mit CSS-Regeln zu stylen.

Mithilfe des h2-Selektors könnte man zum Beispiel alle Überschriften der Ebene 2 (also z.B. <h2>Überschrift</h2>) auswählen und im Anschluss grau färben oder anders stylen:

h2 {
  color: gray;
}

Und wenn man später im Projekt die Farbe auf ein sanftes Blau wechseln möchte, reicht es aus, einfach den Wert in genau jener Deklaration auszutauschen:

h2 {
  color: cornflowerblue;
}

Element Selektoren

Element Selektoren wählen meistens HTML Elemente als Ziel aus. Allerdings gibt es auch Sonderfälle. So können Element-Selektoren auch z.B. XML Elemente als Ziel auswählen.

Ein Element-Selektor kann also jedes erdenkliche HTML-Element beschreiben und als Schlussfolgerung auch stylen.

Für einen HTML Paragraphen könnte das zum Beispiel so aussehen:

p {
  font-size: 1rem;
}

Das ganze funktioniert natürlich auch für andere HTML-Elemente. Zum Beispiel kann man auch das html-Element selbst stylen oder die Deklarationen für article:

html {
  color: black;
}

footer {
  margin: 1rem 0;
}

Kombinieren von Selektoren

Um mehrere Elemente mit dem gleichen Styling zu versehen, können verschiedene Selektoren auch kombiniert werden.

Hierfür wird nach dem ersten CSS Selektor ein weiterer Selektor hinzugefügt und durch ein Komma separiert.

Das folgende Beispiel verleiht dem footer- und header-Element eine sichtbare Umrandung:

Selektoren für CSS Klassen

// Verleiht dem Header- und Footer-Element eine schwarze Umrandung.

header, footer {
  border: 3px solid black;
}

Der Klassenselektoren besteht aus einem einfachen Punkt gefolgt von dem Namen der Klasse.

Das sieht in CSS für eine Klasse „highlight“ dann wie folgt aus:

<p>
  <strong class="highlight">Besonders wichtige Phrasen werden mit dem Strong-Element hervorgehoben.</strong> 
  In diesem Beispiel sollen sie wie in Lehrbüchern blau hervorgehoben werden!
</p>
.highlight {
  color: blue;
}

Zwar werden jetzt alle Elemente, welche die CSS-Klasse „highlight“ besitzen blau gefärbt. Allerdings möchte man das vielleicht für andere Elemente anders handhaben.

Zum Beispiel sollen wichtige Listenpunkte nicht blau, sondern vielleicht orange eingefärbt werden.

Um ein Vermischen zu verhindern, kann man vor den Punkt der CSS-Klasse einfach einen anderen Selektor setzen.

p.highlight {
  font-weight: bold;
}

span.highlight {
  color: blue;
}

In diesem Beispiel würde der Selektor also Paragraphen auswählen, welche die Klasse highlight besitzen und sie fetten.

Gleichzeitig haben alle Span-Elemente mit der CSS-Klasse highlight die Textfarbe blau.

Mehrere CSS Klassen selektieren

Wenn man ein HTML Element mit mehreren CSS-Klassen auswählen möchte, funktioniert das durch einfaches aneinanderreihen der CSS-Klassen.

Wenn man ein HTML-Element mit mehreren Klassen erstellt:

<p class="dogma learningbox">
  Irgendein Absatztext
</p>

Dann kann man alle Paragraphen selektieren, die sowohl die beiden Klassen dogma und learningbox besitzen.

p.dogma.learningbox {
  //Styling kommt hier hinein
}

Alle Paragraphen die nur eine der beiden Klassen besitzen, werden dann nicht ausgewählt.

Wenn das HTML-Element dagegen noch eine weitere Klasse besitzen würde, dann würde es vom Selektor trotzdem ausgewählt werden, da es ja die beiden Klassen besitzt und alle Voraussetzungen des Selektors erfüllt.

<p class="dogma learningbox nonsense">
  Irgendein Absatztext
</p>

Dieses Beispiel würde also das gleiche Styling erhalten.

Der ID Selektor

Auf die gleiche Weise wie der Klassen-Selektor CSS Klassen auswählen kann, können mit dem ID Selektor (#) CSS-ID’s ausgewählt werden.

<p id="dogma">
  Irgendein Absatztext
</p>

Das Erkennungsmerkmal ist dabei die Raute oder der Hashtag, der dem ID-Namen vorangestellt wird.

p#dogma {
  //Styling kommt hier hinein
}

ID’s und ID Selektoren bewähren sich vor allem dann, wenn man im Vorfeld nicht weiß, welches Element der Seite gestylt werden muss.

Wenn man also weiß, dass es auf jeder Inhaltsseite ein variierendes Element gibt, dann kann es mehr Sinn machen, hierfür eine ID bereitzustellen.

Wann sollten IDs und wann Klassen verwendet werden?

Immer wenn auf einer HTML-Seite mehrere Elemente einen Style erhalten sollen, dann macht es Sinn CSS Klassen zu benutzen.

Wenn es dagegen nur ein Element pro Seite gibt, welches das Styling erhält, dann kann auch eine ID verwendet werden.

Wichtig ist nur zu wissen, dass eine ID immer nur einmal pro HTML-Seite verwendet werden sollte (auch wenn manche Browser auch weitere Vorkommen der gleichen ID stylen).

Wenn es also nur eine Schlagzeile pro HTML-Seite gibt, dann kann dafür eine ID vergeben werden. Sind es dagegen mehrere, dann macht eine CSS Klasse an der Stelle mehr Sinn für das Styling.

Selektieren nach Eigenschaften

Manchmal hat man Situationen, in denen die klassischen Selektoren nicht ausreichen. Für diese Fälle gibt es die Attribut-Selektoren. Also Selektoren, die je nach HTML Eigenschaft und Attribut eine Auswahl treffen können.

Man unterscheidet hier zwischen „simple attribute selectors, exact attribute value selectors, partial-match attribute value selectors“ und „leading-value attribute selectors“.

Einfache Attribut-Selektoren (simple attribute selectors)

Einfache Attribut-Selektoren wählen alle Elemente aus, die ein bestimmtes HTML-Attribut besitzen, ohne den Wert zu vergleichen.

<p class="class1 class2">
  Irgendein Absatztext
</p>

<ul class="class4">
//list content
</ul>
[class] {
  //Styling hier
}

Dabei werden alle Elemente ausgewählt, die ein Klassen-Attribut besitzen. Egal ob es sich dabei um Klasse 1, 2 oder 4 handelt.

Man kann diesen Attribut-Selektor zum Beispiel dafür einsetzen, um alle Bilder ohne Alternativtext hervorzuheben. Erst wenn ein Nutzer dem Bild ein Alt-Attribut hinzufügt, wird das Styling dann verschwinden:

img[alt] {
  border: 5px solid red;
}

Auswahl basierend auf dem exakten Wert eines Attributs (exact attribute value selectors)

Die zweite Gruppe der Attribut-Selektoren bezieht jetzt auch den Wert des entsprechenden Attributs mit ein um eine Auswahl zu treffen.

img[src="http://...link..."] {
  //Nur dieses eine Bild wird gestylt.
}

Sobald es hierbei nur eine kleine Abweichung gibt, weil von http auf https gewechselt wird, verliert das Bild das styling.

Wie bei den anderen Selektoren kann man auch diesen Selektor nach belieben kombinieren, zum Beispiel um gleich mehrere Werte abzufragen.

a[href="https://..."][title="Linktitle"] {
  //Styling kommt hier hinein
}

Das Styling würde in diesem Beispiel alle Links mit dem href-Wert und einem Titel-Attribut mit dem Wert „Linktitle“ stylen.

Auswahl basierend auf einer teilweisen Übereinstimmung eines Attributwerts (partial-match attribute value selector)

Um Elemente auszuwählen, die nur zum Teil mit einem Wert übereinstimmen, gibt es für Attributselektoren insgesamt fünf Operatoren, welche das Filtern beeinflussen:

[foo~=“bar“]Wählt jedes Element, dass für das Attribut foo einen Wert „bar“ in einer Leerzeichen-separierten Aufzählung enthält.
[foo*=“bar“]Wählt jedes Element, dass für das Attribut foo einen Teilstring „bar“ enthält. (Also zum Beispiel foo=“rhabarber“)
[foo^=“bar“]Wählt jedes Element, dass für das Attribut foo mit dem Wert „bar“ beginnt. (Also zum Beispiel foo=“barzahlung“)
[foo$=“bar“]Wählt jedes Element, dass für das Attribut foo mit dem Wert bar endet. (Also zum Beispiel foo=“kostbar“)
[foo|=“bar“]Wählt jedes Element, dass für das Attribut foo mit dem Wert bar oder bar gefolgt mit einem „-“ beginnt. (Also zum Beispiel foo=“bar-o-meter“)
Die verschiedenen Möglichkeiten der Filterung mit einem Attributselektor für teilweise Übereinstimmung

Die letzte Anwendung wird vor allem für das Sprachattribut lang verwendet. Aber man kann das ganze auch dafür verwenden, dass alle Schaubilder die mit „Schaubild-1“, „Schaubild-2“ usw. beginnen, das gleiche Styling erhalten.

img[src|="schaubild"] {
  //Styling für die Schaubilder kommt hier hinein
}

Attribut-Selektoren unabhängig von der Groß-/Kleinschreibung gestalten

Mit dem „Case Insensitivity Identifier“ filtert der Selektor unabhängig von Groß- und Kleinschreibung. Hierfür wird einfach ein i vor das Ende der eckigen Klammer gesetzt.

a[href="https://..." i][title="Linktitle" i] {
  //Styling kommt hier hinein
}

Elemente anhand der Seitenstruktur auswählen

Jedes HTML-Dokument kann durch Verschachteln strukturiert werden. Zum Beispiel besteht eine Liste aus mehreren Kind-Elementen und dem Eltern-Element.

<ol class="Eltern-Element">
  <li>Erstes Kind-Element</li>
  <li>Zweites Kind-Element</li>
  <li>Drittes Kind-Element</li>
</ol>

Um das ganze Potential von CSS zu nutzen, kann man diese Hierarchie für Selektoren nutzen.

Der Selektor für Nachkommen (Descendant Selectors)

Um die Kind-Elemente auszuwählen, kann man einfach zwei Selektoren durch ein Leerzeichen getrennt hintereinander stellen.

Das Leerzeichen dient dabei als Kombinator.

h1 strong {
  //Styling kommt hier hinein
}

In diesem Beispiel würden also alle Strong-Elemente ausgewählt werden, die Kind von einem h1-HTML-Tag sind.

Das ganze funktioniert auch mit mehreren Selektoren.

header ul ol ul {
  //Styling kommt hier hinein
}

Oder in Kombination mit anderen Selektoren.

header ul ol ul, footer blockquote {
  //Styling kommt hier hinein
}

Wichtig ist zu wissen, dass die Entfernung der Kinder egal ist. Wenn also zwischen den Eltern und dem gewünschten Kind-Element weitere Ebenen liegen, dann wird das Styling trotzdem angewandt.

Kind-Selektor (child selector)

Mit dem Kind-Selektor können Kindelemente ausgewählt werden, die direkte Nachfahren eines Elternteils sind. Das Symbol hierfür ist ein „>“-Zeichen.

h1 > strong {
  //Styling kommt hier hinein
}

Das Styling wird nur angewandt, wenn keine weiteren Kinder zwischen Eltern-Element und Kind liegen.

Geschwister-Selektor (Adjacent Sibling Selector)

Der Geschwister-Selektor wird durch das „+“-Zeichen geschrieben und bewirkt, dass Elemente der gleichen Hierarchiestufe ausgewählt werden.

Und zwar wird das zuerst darauffolgende Element ausgewählt, welches die Eigenschaften erfüllt.

h1 + p würde also den ersten Paragraph auswählen, der unter dem gleichen Elternteil wie h1 zu finden ist.

<html>
  <h1>Überschrift</h1>
  <ol class="Eltern-Element">
    <li>Erstes Kind-Element</li>
    <li>Zweites Kind-Element</li>
    <li>Drittes Kind-Element</li>
  </ol>
  <p>Paragraph</p>
</html>
  
h1 + p {
  //Styling kommt hier hinein
}

Wählt den ersten Geschwisterparagraphen nach h1 aus.

Selektoren für alle Geschwister

Manchmal möchte man alle Elemente eines Types unter einem Elternteil auswählen. Hierfür gibt es den „general sibling combinator“. Dieser Kombinator wählt alle Geschwister aus, die den gleichen Elternteil besitzen.

Zum Beispiel würde h2 ~ol alle nummerierten Listen auswählen, die hierarchisch unter einer h2 stehen.

h2 ~ ol {
  //Styling kommt hier hinein
}
<html>
  <h2>Überschrift</h2>
  <ol class="Eltern-Element">
    <li>Erstes Kind-Element</li>
    <li>Zweites Kind-Element</li>
    <li>Drittes Kind-Element</li>
  </ol>
  <p>Paragraph</p>
  <ol>...</ol>
</html>

Beide Listen würden styling erhalten, da sie hierarchisch auf der gleichen Ebene stehen.

Pseudoklassen-Selektoren

Neben den obigen Selektoren gibt es auch noch Pseudoklassen und passende Selektoren. Zum Beispiel kann man so den Linkhover stylen. Zum Beispiel mit der Pseudoklasse :hover

a:link:hover {
  //Styling kommt hier hinein
}

Hier gibt es nochmal eine große Bandbreite an verschiedenen Pseudoklassen-Selektoren, die den Rahmen dieses Beitrags etwas sprengen würden.

Vielleicht gibt es hierfür in Zukunft einen weiteren Beitrag.

Weiterführende Ressourcen