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. Der einfachste Selektor ist der Typselektor: Er wählt alle Elemente eines Typs wie »alle p-Elemente« oder »alle ul-Elemente«. Alle HTML-Elemente, die innerhalb des body-Elements sitzen, eignen sich als Typselektor.

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

Damit Stylesheet-Regeln nicht immer auf alle Elemente – z.B. alle p-Elemente – angewendet werden, differenzieren class- und id-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 }

CSS Element- oder Typselektoren

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.

class="…" : 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>
…

id="…" : 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.

Viele moderne CSS-Methoden (z.B. BEM) vermeiden IDs, denn die Eigenschaften per id-Selektor sind schwer zu überschreiben.

Die wichtigsten Selektor-Arten

Diese CSS-Selektor-Typen decken etwa 90% aller CSS-Fälle ab. Sie lassen sich miteinander kombinieren, so dass komplexe Suchmuster entstehen.

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.

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.

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.

Selektor Priorität: Spezifität

Welche Regel gewinnt, wenn mehrere Regeln dasselbe Element ansprechen? Der Browser entscheidet das über das »Gewicht« der Selektoren.

Ein id-Selektor hat eine höhere Priorität oder Gewicht als ein class-Selektor, der class-Selektor ein höheres Gewicht als ein Typselektor. Am Ende schlägt ein Inline-Selektor alle anderen Selektoren.

p {
	color: blue;
}

.text {
	color: red;
}