CSS Selektoren: Tag-Name, class und id

Einfacher CSS-Selektor

Ein CSS-Selektor identifiziert HTML-Elemente durch Suchmuster, die miteinander kombiniert werden können, um aus einfachen Selektoren komplexe Filter zu erzeugen. Alle HTML-Elemente, die innerhalb des body-Elements sitzen, eignen sich als CSS-Selektoren.

 a { text-decoration: none; }
 p { color: rgb(80,80,10); }
 ▲
 │
 └──── Element-Selektor 

Damit Stylesheet-Regeln nicht immer auf alle Elemente – z.B. alle p-Elemente – angewendet werden, differenzieren Selektoren die Anwendung eines CSS-Stils. Die einfachsten Selektoren nutzen HTML-Attribute wie class und id, um besondere Elemente herauszufiltern.

  ┌── ID-Selektor
  │
  ▼
a#extlink { color: green; }
p.meta { font-size: smaller }
  ▲
  │
  └──── Klassen-Selektor 

oder kürzer, einfacher und nicht auf bestimmte HTML-Elemente beschränkt:

#extlink { color: green; }
.meta { font-size: smaller }

Komplexe Selektoren

Darüber hinaus filtern Attribut - Selektoren Elemente mit bestimmten Attributen wie einem title- oder lang-Attribut und lassen sich anhand ihrer Position innerhalb des HTML-Dokuments (dem Kontext) identifizieren. Pseudoklassen und Pseudoelemente maskieren Elemente, die es im HTML-Quellcode nicht gibt – z.B. ein Link, über dem die Maus gerade hovert.

Diese grundlegenden Selektoren lassen sich miteinander kombinieren, so dass komplexe Suchmuster entstehen.

CSS Element- oder Typ-Selektoren

Ein HTML-Tag-Name als Selector ist der einfachste Fall.

p { font-size: 0.92em; color: rgb(70,70,70); }

Er trifft auf alle p-Elemente der HTML-Seite zu, ganz gleich, wie die Elemente des Dokuments aufgehangen sind und ob es sich um Inline- oder Block-Elemente handelt.

CSS-Klassen

Klassen werden im HTML-Code durch das HTML-Attribut class mit einem frei wählbaren Namen definiert.

<p class="content">Mein Text</p>

Im Stylesheet wird ihnen ein Punkt vorangesetzt oder der Klassenselektor wird auf bestimmte HTML-Elemente beschränkt.

.content { color: white; background-color: green; width: 500px; }

// Wenn der Stil ausschließlich auf P-Elemente 
// mit dem Attribut class="content" angewendet werden soll
p.content { color: white; background-color: green; width: 500px; }

<h2 class="content">Lorem Ipsum</h2>
<p class="content">Lorem Ipsum</p>
<div class="content">Lorem Ipsum</div>
…

Die Namen von CSS-Klassen fangen mit einem Buchstaben an, alle UFT-8-Zeichen sind erlaubt (Leerzeichen allerdings nicht). class="menü" funktioniert genauso wie class="♥".

Nur mit Herz

Menü

.menü {color: green; font-size:2em }
.♥ { color: firebrick; font-size: 2em }
…
<p class="♥">Nur mit Herz</p>
<p class="menü">3-Gänge-Menü</p>

Mehrere Klassen für ein Element

Das class-Attribut kann einem Element auch mehrere Klassen zuordnen. Dazu werden die Namen der Klassen ohne Komma im class-Attribut aufgezählt.

Das hält die CSS-Datei übersichtlicher und vermeidet lange Listen von CSS-Stilen mit nur wenigen Variationen.

.bigbox { 
   border: 2px solid silver; 
   padding: 1em; 
   font-size: 2em; 
   background-color: lavender; 
}

.frame { border: 2px solid silver; padding: 1em; }
.boxft { font-size: 2em; }
.backg { background-color: lavender; }
… 
<div class="frame boxft backg">
   Klassentreffen
</div>

CSS chaining – verketten

Wenn ein Element mehrere Klassen aufweist, lassen sich die Klassen zu einem Selektor verketten – diese Technik wird auch als chaining bezeichnet.

.message { 
    background-color: beige;
    border-bottom: 2px solid darkkhaki;
    padding:0.5em;
    margin-bottom: 1em;
    font-weight: bold;
}

.error {
	background-color: mistyrose;
	border-color:firebrick;
}

.message.error {
	color: red;
}

message.error übernimmt padding, margin-bottom und font-weight der Klasse .message und gibt es an Elemente, die beiden Klassen unterliegen.

<div class="message error">
    Nachricht
</div>

Auch wenn CSS Chaining – Verketten von CSS-Klassen – elegant wirkt, sollte es besser vermieden werden. Selektoren wie message.error haben eine hohe Spezifität (ein hohes Gewicht) und sie können nur durch eine noch höhere Spezifität überschrieben werden.

ID-Selektoren

Ein einzelnes HTML-Element wird eindeutig über das HTML-Attribut id angesprochen. Im Stylesheet wird der Bezeichnung ein # vorangestellt.

#nurDies { color: white; background-color: green; width: 500px; }

<h2 id="nurDies">Lorem Ipsum</h2>

Wird class- und id-Selektoren die Bezeichnung eines HTML-Elements vorangesetzt, wird die Anwendung der Regeln .content und #nurDies auf genau diese Elemente beschränkt:

p.content { color: white; background-color: green; width: 500px; }
h2#nurDies { color: white; background-color: green; width: 500px; }

…
<h2 class="content">Lorem Ipsum</h2>
<p class="content">Lorem Ipsum</p>
<div class="content">Lorem Ipsum</div>
<div class="nurDies">Lorem Ipsum</div>

Die Regeln werden nur auf p-Elemente der Klasse content angewendet, nicht aber auf h2 und div-Elemente der Klasse content. Die Regel nurDies wird gar nicht angewendet, da kein h2-Element mit diesem id-Attribut vorliegt.

Klassen- und ID-Selektoren sind sich sehr ähnlich. Im Grunde genommen könnte man anstelle des ID-Attributs ein class-Attribut benutzen und das class-Attribut im HTML-Dokument nur ein einziges Mal verwenden. Allerdings wäre dieses Anwendung sehr fehlerträchtig. Darüber hinaus wird das ID-Attribut von Skripten benutzt, um ein Element eindeutig zu identifizieren. Die Identifikation über das Klassen-Attribut wäre mühsam und langsamer.

id-Selektoren als Attribut-Selektoren

Anstelle von #sidebar kann ein id-Selektor als Attribut-Selektor geschrieben werden: [id="sidebar"]. Der Attribut-Selektor kann zwar nicht wie ein Klassen-Selektor wieder verwendet werden, hat aber eine niedrige Spezifität und lässt sich einfacher überschreiben.