CSS Grundlagen: So funktionieren CSS-Selektoren – Tipps für gezieltes Styling von Elementen

English

CSS Selektoren für HTML-Elemente

Eine CSS Regel besteht aus zwei Teilen – dem CSS Selektor und der Deklaration in geschweiften Klammern, { und }.

Einfach ausgedrückt ist ein CSS-Selektor die Zuordnung zu einem HTML-Element auf einer Webseite (Englisch: Web Page). Die Regeln, die einem Selektor zugeordnet werden, werden auf die Elemente der Webseite angewendet.

In der Deklaration werden die Eigenschaften und Werte angegeben.

CSS Selektoren können gruppiert werden. Hierzu wird als Trennzeichen das Komma verwendet. Die durch Kommas getrennte Liste von CSS Selektoren entspricht dabei einer logischen ODER Verknüpfung.

Die einfachsten CSS Selektoren sind Element-Selektoren, z.B. H1 oder P. Statt Element-Selektor wird manchmal auch die Bezeichnung Typ-Selektor verwendet. Dieser Selektor wählt alle HTML-Element eines bestimmten Typs aus und verbindet diese Elemente mit dem CSS-Style.

Beispiel 
/* Gruppierte Selektoren */ 
h1, h2, h3 {
  /* Schriftgröße für Überschriften */
  font-size: 1.3em;

  /* Schriftfarbe mediumRed */
  color:   #bb0000;
  ...
}

Einfach-Selektoren

Bei den einfachen CSS-Selektoren ist man nicht darauf beschränkt, nur HTML-Tags zu selektieren. Es gibt verschiedene Arten von Selektoren. Diese Selektoren lassen sich auch kombinieren. Die Einfach-Selektoren werden in folgende Gruppen unterteilt:

1. Der Element-Selektor bzw. Typ-Selektor

Der einfachste Selektor ist der sogenannte Typ-Selektor. Mit einem Typ-Selektor kann man spezifischen HTML-Tags bestimmte Stile zuweisen. Die Definitionen zur Formatierung des HTML Elements werden im Deklarations-Teil der CSS-Regel notiert. Die auf diese Weise definierten Stile gelten für alle Vorkommen dieses HTML-Tags, z.B. H1 (Überschrift 1. Ordnung) oder P (Absatz).

Beispiel CSS 
/* Element-Selektor */
h1 {
  /* Schriftgröße für alle H1 Überschriften */
  font-size: 1.3em;

  /* Schriftfarbe mediumRed */
  color:   #bb0000;
  ...
}

2. Der Klassen-Selektor bzw: class-Selektor

Mit dem Typ-Selektor ist es nicht möglich, ein spezifisches Element oder nur bestimmte Elemente eines Typs zu selektieren.

Damit eine CSS-Regel nicht immer alle Elemente eines Typs selektiert, kann man für das Element eine Klasse (English: class) definieren. Der class-Selektor spricht nur die Elemente an, für die im HTML-Code das entsprechende class-Attribut im einleitenden HTML-Tag (z.B. <p class="bigger">) angegeben wird.

Beachte:

  1. In der Style-Definition ist der class-Selektor (Klassen-Selektor) der Klassenname mit vorangestelltem Punkt.

  2. Der Klassenname ist Case-sensitiv, d.h. Groß- und Kleinschreibung muss beachtet werden.

  3. Der Klassenname darf nicht mit einem Bindestrich oder einer Ziffer beginnen.

  4. Man kann einem HTML-Element mehrere Klassen zuweisen. Die Namen der Klassen im class-Attribut werden durch Leerzeichen voneinander getrennt angegeben.

  5. Eine definierte Klasse darf im HTML-Code beliebig oft verwendet werden.

Beispiel CSS 
/* CSS Klasse definieren */
p {
  /* Standard-Schriftgröße */
  font-size: 1em;
}

.bigger {
  /* Schrift 25% größer als die Standardschrift */
  font-size: 1.25em;
}
Beispiel HTML 
<p>
Dieser Absatz hat die Standard-Schriftgröße.
</p>
<p class="bigger">
Für diesen Absatz wird die Schrift vergrößert.
</p>
Ausgabe des HTML-Codes

Dieser Absatz hat die Standard-Schriftgröße.

Für diesen Absatz wird die Schrift vergrößert.

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

3. Der id-Selektor

Mit dem Attribut id="…" kann man im HTML-Code einem Element eine eindeutige id zuweisen. Diese id darf in dem HTML-Dokument nur einmal verwendet werden. Mit dem id-Selektor kann man ein bestimmtes HTML-Element mit CSS formatieren.

Der id-Selektor selektiert nur das Element, für das im HTML-Code das entsprechende id-Attribut im einleitenden HTML-Tag (z.B. <p id="intro">) angegeben wird.

Beachte:

  1. In der Style-Definition ist der id-Selektor der id-Name mit vorangestelltem Raute-Zeichen #.

  2. Der id-Name ist case-sensitiv, d.h. Groß- und Kleinschreibung muss beachtet werden.

  3. Der id-Name darf nicht mit einem Bindestrich oder einer Ziffer beginnen.

  4. Eine definierte id darf im HTML-Code einer Webseite nur einmal verwendet werden.

  5. Der id-Selektor hat ein höheres Gewicht als ein class-Selektor.

Beispiel CSS 
/* CSS class und id definieren */
p {
  /* Standard-Schriftgröße */
  font-size: 1.0em;
}

.wichtig {
  /* Font-Style: schräggestellt */
  font-style: oblique;

  /* Hintergrund: lightGreen */
  background: #90ee90;

  /* Schriftfarbe: mediumRed */
  color: #da1f12;
}


#wichtig {
  /* Hintergrund: lightMagenta */
  background: #ec54f4;

  /* Schriftfarbe: mediumBlue */
  color: #0000cd;
}
Beispiel HTML 
<p id="wichtig" class="wichtig">
Dieser Absatz ist wichtig. Für den Absatz ist die id "wichtig" und die Klasse "wichtig" definiert. Welche der beiden Definitionen wird angewendet?
</p>
Ausgabe des HTML-Codes

Dieser Absatz ist wichtig. Für den Absatz ist die id "wichtig" und die Klasse "wichtig" definiert. Welche der beiden Definitionen wird angewendet?

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Dieses Beispiel zeigt:

  1. Wenn eine Eigenschaft für den id-Selektor UND einen class-Selektor definiert ist, dann wird die Definition für den id-Selektor angewendet.

  2. Wenn eine Eigenschaft des class-Selektors für den id-Selektor nicht definiert ist, dann wird die Definition des class-Selektors angewendet. In diesem Beispiel gilt das für die Eigenschaft font-style, die nur für den class-Selektor definiert ist.

4. Der Universal-Selektor