CSS: Selektoren

Erstellt: 18.04.2006 | Aktualisiert: 05.03.2009

Selektoren sind eines der grundlegenden Konzepte von CSS. Sie regeln wie Stil-Eigenschaften Elementen zugewiesen werden.

Einfache Elementselektoren

p {color: #FF0000;font-size:11px;}
p, h4, li {font-family:Verdana, Arial, sans-serif;}

Einfachste Variante: Zuweisungen können bestimmten XHTML-Tags zugeordnet werden. Es ist auch möglich verschiedenen Elementen ein und derselben Anweisung voranzustellen.

Kombinierte Selektoren

div p {font-size:13px;}

Man kann auch einer bestimmten Kombination von Elementen einen bestimmten Stil zuweisen.

Class- und ID-Selektoren

.wichtig {font-weight:bold;}
#navigation {background-color: grey;}

Allgemeine Klassendefinitionen beginnen immer mit einem Punkt. Diese Klasse kann über class="wichtig"allen möglichen Elementen im body einer XHTML-Datei zugewiesen werden. Im Unterschied dazu werden IDs mit dem “Gartenhag” aufgerufen:

Universal-Selektor

* {margin: 0; padding: 0;}

Der Universal-Selektor wird mit einem Stern * bezeichnet. Die Verwendung ist nicht so häufig. Interessant ist der Universal-Selektor um einen sogenannten Global White Space Reset durchzuführen.

“Nachkommen” Selektor

div#navigation li p.info{color: #FF00;}

Selektoren können mit einem Leerschlag getrennt aufeinander folgen. Damit können ohne eine Klasse oder ID zu vergeben einzelne Elemente direkt angesprochen werden.

Kind-Selektoren

body > p {color: #FF00;}

Diesbezüglich gibt es noch spezieller Selektoren. So werden als Kind-Selektoren nur direkte “Nachkommen” eines Elementes angesprochen, d.h. in diesem Fall nur p-Elemente die direkt auf ein body-Elemente folgen. ACHTUNG: Wird durch IE6 nicht interpretiert.

Folgeelement

h2+p {margin-top: 10px;}

Als Folgeelement-Selektor markiert ein Element, dass unmittelbar auf ein anderes folgt und das selbe Elternteil hat. Im folgenden Beispiel wird beispielsweise der Absatz, welcher direkt auf eine Überschrift 2 folgt mit Abstand 10px gesetzt. ACHTUNG: Wird durch IE6 nicht interpretiert.

Attribut-Selektoren

a[title] { color:#f00; }

Attribut-Selektoren reagieren auf das Vorkommen eine bestimmten Attributes in einem Element. Folgend würden nur a Elemente mit einer anderen Schriftfarbe versehen , welche auch ein title Attribut haben.

Pseudo-Klassen und Pseudo-Elemente

div#navigation p:first-child{background:#FF0000;}
a {font-family: Verdana, Arial, sans-serif;}
a:hover {color:#FF0000;}
p:first-line {font-weight:bold;}

Nicht ganz unwichtig sind die sogenannten Pseudo-Klassen. Einer meiner Lieblinge ist die Pseudo-Klasse first-child. Wichtig sind auch die Link-Pseudo-Klassen wie :link, :visited,:hover,:active und :focus. Ebenfalls äusserst nützlich sind die sogenannten Pseudo-Elemente wie :first-line, :first-letter, :before und :after

ACHTUNG: Nur die Link-Pseudo-Klassen wird durch IE6 interpretiert. Ganz allgemein gilt es bei der Verwendung der Link Pseudo-Klasse zu beachten, dass die Reihenfolge Link-Stati Auswirkungen auf die endgültige Darstellung hat. Mehr zum Thema:

The order of link pseudo-classes matters (456 Berea Street)

Vererbung

body {
font-family: Verdana, Arial, sans-serif;
font-size: 1em;
}

In CSS können durch Vererbung Stil-Eigenschaften von Elementen auf untergeordnete Elemente weitergegeben werden. Auf diese Weise können unter anderem grundlegende Anweisung dem body-Element zugewiesen werden, welche für alle weiteren Objekte Gültigkeit haben. Im obenstehenden Beispiel wird die Schrift und die Grundgrösse für gesamte Dokument definiert.

Kaskadierung

Einem Element können natürlich verschiedene Stil-Anweisungen zugewiesen werden. Es muss also geregelt werden, wie das Element letztlich formatiert wird. Dies ist abhängig vom Ursprung der Anweisung, der Wertigkeit des Selektors und der Reihenfolge.

  • Gewichtung nach Ursprung
    • Stylesheet des Browsers
    • Stylesheet des Nutzers
    • Stylesheet des Autors
  • Wertigkeit spezifischer Selektoren
  • Reihenfolge

Wie die Wertigkeit einer spezifischen Anweisung genau ermittelt werden kann, wird von Michael Jendryschik in seiner CSS Einführung (Kapitel: Kaskade) verständlich beschrieben.

Überschriften

h1 {font-face: Verdana; color: green !important;}

Man kann einer Anweisung – unabhängig der erwähnten Vererbung und Kaskadierung – mit als wichtig markieren. Dafür setzt man das Wort “important” mit einem vorangestellten Ausrufezeichen nach dem Wert.

Verwandte Snippets

Weblinks