Stil mit {stil}

Mar 2008

CSS-Selektoren: Element-, Class- und Id-Selektoren

Selektoren filtern HTML-Elemente mit Suchmustern, die auch miteinander kombiniert werden können, um aus einfachen Selektoren komplexe Filter zu erzeugen. Die einfachsten Selektoren sind die Typ- oder Elementselektoren, die einfach nach allen Elementen eines Typs suchen, um diese mit CSS-Eigenschaften zu versorgen.

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.

a.extlink { color: green; }
p.meta { font-size: smaller }
  ^
  |
  +---- Klassen-Selektor 

Darüber hinaus filtern Attribut-Selektoren Elemente mit bestimmten Attributen wie einem title- oder lang-Attribut udn 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.

Element- oder Typselektoren

Ein Tagname als Selektor ist der einfachste Fall eines CSS-Selektors.

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

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

Klassenselektoren

Klassenselektoren werden im HTML-Code durch das HTML-Attribut class mit einem frei wählbaren Namen definiert. Der Name soll mit einem Buchstaben anfangen.

<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: green; width: 500px; }

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

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

ID-Selektoren

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

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

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

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

p.content { color: white; background: green; width: 500px; }
h2#nurDies { color: white; background: 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 sehr mühsam und langsamer.