CSS-Selektoren

CSS-Syntax

In CSS wird das Layout einer Seite über eine Aufzählung von Regeln definiert. Die Regeln definieren dabei das Aussehen von Boxen, z.B. ihre Größe, Position oder Farbe.

Eine CSS-Regel besteht aus zwei Bestandteilen: dem Selektor und dem Deklarationsblock: 

Selektor {
	Eigenschaftswert1 : Wert1;
	Eigenschaftswert2 : Wert2
}

Die beiden Bestandteile haben die folgende Bedeutung:

  • Der Selektor wählt die HTML-Elemente (Boxen) einer Seite aus, auf die sich die Angaben aus dem Deklarationsblock beziehen. Im folgenden Beispiel wählt der Selektor durch die Angabe h1 alle Überschriften der 1. Ordnung aus.
  • Im Deklarationsblock werden alle Layout-Eigenschaften aufgezählt, die das betroffene HTML-Element (Box) in der dargestellten Seite haben soll. im folgenden Beispiel werden die Eigenschaften "Hintergrundfarbe" (background-color) und Schriftfarbe (color) gesetzt. Die Eigenschaftswerte stehen hinter dem jeweiligen Doppelpunkt: lightblue für die Hintergrundfarbe und salmon für die Schriftfarbe.
Beispiel

See the Pen CSS - Elementselektor by DP-Beispiele (@bdhdm) on CodePen.

CSS-Selektoren

Die wichtigsten Selektoren in CSS sind:

Id-Selektor:
Id-Selektoren werden mit einem # eingeleitet. Der Id-Selektor wählt in einer HTML-Seite das Element aus, bei dem der entsprechende Wert im Attribut id steht. Da die Id in einem HTML-Dokument eindeutig sein muss, wählt der Id-Selektor immer maximal ein Element aus.
Beispiel: Id-Selektor

See the Pen CSS - ID-Selektor by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

Klassenselektor
Klassenselektoren werden mit einem . eingeleitet. Mit Klassenselektoren können gleiche Eigenschaften für mehrere HTML-Elemente definiert werden. Eine Klasse in HTML wird mit dem Universalattribut class gekennzeichnet. Damit können mehrere Elemente in einem HTML-Dokument zu einer Gruppe (Klasse) zusammengefasst werden.
Beispiel: Klassenselektor

See the Pen CSS - Klassenselektor by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

Elementselektor
Elementselektoren zählen die HTML_Elementnamen auf, um zu definieren, welche Elemente durch sie ausgewählt werden. Der Elementselektor besteht aus dem gesuchten HTML-Namen, z.B. h1, p oder li.
Beispiel: Elementselektor

See the Pen CSS - Elementselektor by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

Hierarchieselektor
Mit Hierarchieselektoren werden Elemente aufgrund ihrer Position in der HTML-Verschachtelungsstruktur ausgewählt. Damit beschreiben Hierarchieselektoren den Pfad eines Elementes im HTML-Baum über seine Elternkonten. Hierarchieselektoren benutzen entweder das Leerzeichen " " oder das Größerzeichen >, um die Hierarchie zu beschreiben:
  • li {…}: die Regel gilt für alle Listeneinträge
  • ul li {…}: die Regel gilt für alle Listeneinträge unsortierter Listen (direkte oder indirekte Kinder)
  • ul>li {…}: die Regel gilt für alle Listeneinträge unsortierter Listen (nur direkte Kinder)
  • ul li ul li {…}: die Regel gilt nur für unsortierte Listeneinträge, die selbst (direkt oder indirekt) innerhalb anderer unsortierter Listeneinträge stehen
Beispiel: Hierarchieselektor

Betrachten Sie das folgende Beispiel und beantworten Sie die folgenden Fragen:

  • Warum ist der Text "ol - Eins" grün, obwohl für alle li-Elemente in unsortierten Listen die Farbe Rot festgelegt wurde?
  • Warum ist der Text "ol - Eins" grün, obwohl für alle direkten Kinder (li-Elemente) in sortierten Listen die Farbe Blau festgelegt wurde?
  • Aufgrund welcher Regel ist der Eintrag "ul - Eins" rot? Warum gilt diese und keine andere Regel?

See the Pen OJNBYKw by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

Universalselektor
Der Universalselektor wird mit einem * eingeleitet. Mit dem Universalselektor können gleiche Eigenschaften für alle HTML-Elemente eines Dokumentes definiert werden.
Beispiel: Universalselektor

See the Pen CSS - Universalselektor by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

Gruppenselektoren
Zudem können mehrere Selektoren durch Komma getrennt zu einem Gruppenselektor zusammengefasst werden. Mit Gruppenselektoren können gleiche Eigenschaften für mehrere HTML-Elemente auch mit einer einzigen Regel definiert werden.
Beispiel: Gruppenselektor

See the Pen CSS - Gruppenselektor by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

CSS-Deklarationen

Die Syntax der CSS-Deklarationen wurde in den obigen Beispielen bereits benutzt. Hier sind noch die wichtigsten Bestandteile zusammengefasst:

  • Die einzelnen CSS-Deklarationen stehen zwischen geschweiften Klammern und werden voneinander durch ein Semikolon getrennt.
  • Nach der letzten Deklaration kann, muss aber kein Semikolon stehen.
  • Eine CSS-Deklaration besteht aus dem Namen einer Eigenschaft und ihrem Wert. Die Zuordnung des Wertes zur Eigenschaft wird mit einem Doppelpunkt markiert.
Überprüfung der CSS-Korrektheit

Auch CSS-Dateien müssen korrekt sein, damit sie im jeden Browser funktionieren.

Die Korrektheit einer CSS-Datei kann ebenfalls mit einem Validator überprüft werden: https://jigsaw.w3.org/css-validator/