CSS-Selektoren

Eine CSS-Regel besteht aus zwei Bereichen. Innerhalb der geschweiften Klammern ist der Deklarationsteil, in dem Eigenschaften und Werte eingetragen werden, z.B. die Schriftgröße 14px. Vor der öffnenden, geschweiften Klammer ist der Bereich für den Selektor. Das kann z.B. das HTML-Element Absatz sein, wofür der Tag p verwendet wird. Die Eigenschaft/Werte-Paare innerhalb des Deklarationsteils werden dem Selektor zugewiesen. Beim folgenden Beispiel weist man den Absätzen (P-Tag) eine Schriftgröße von 14px zu.

CSS-Regel mit Selektor und Deklaration

Bei den CSS-Selektoren ist man nicht nur auf HTML-Elemente beschränkt. Es gibt mehrere Arten von Selektoren und es ist auch möglich, diese miteinander zu kombinieren. Sie werden in folgende Gruppen unterteilt.

Gruppieren von Selektoren

Alle Selektoren können gruppiert werden. Hierfür verwendet man als Trennzeichen ein Komma. Die Bedeutung entspricht dabei einem logischen ODER. Wenn man CSS-Stile für "h1" oder "h2" oder "h3" zuweisen möchte, kann man diese mit einem Komma getrennt angeben. Das Leerzeichen nach dem Komma ist optional.

Gruppierte Selektoren

Der Vorteil liegt in der Ersparnis von CSS-Code. Wenn mehreren Elementen dieselben CSS-Stile zugewiesen werden sollen, könnte man diese auch einzeln angeben. Ein Beispiel.

p { font-size: 14px; }
a { font-size: 14px; }
ol { font-size: 14px; }

Der folgende Code hätte dieselbe Bedeutung.

p, a, ol { font-size: 14px; }

Einfachselektoren

Die Einfachselektoren selbst werden in verschiedene Typen unterteilt.

Universalselektor

Ein Universalselektor wird mit einem Sternzeichen (*) angegeben und gilt für alle HTML-Elemente. So kann man z.B. für die gesamte Website eine einheitliche Schriftart festlegen und muss die Angaben nicht bei den einzelnen Elementen machen.

Universalselektor

Elementselektor

Mit einem Elementselektor kann man HTML-Tags Stile zuweisen, die im Deklarationsteil angegeben wurden. Sie werden auch Typselektoren genannt. Wird beispielsweise als Selektor h1 angegeben, gelten die Stile für die Überschriften der Ebene 1.

Elementselektor

Klassenselektor

Als Selektor können auch eigene Klassen definiert werden. Diese beginnen mit einem Punkt und einem selbst vergebenem Namen. Beispielsweise könnte man die Klasse .rot definieren und den Eigenschaften Werte zuweisen.

Klassenselektor

Eine CSS-Regel mit einem Klassenselektor hat zunächst keine Auswirkungen, da hiermit nicht automatisch eine Verbindung zu einem HTML-Element hergestellt wird. Erst durch die Zuweisung der Klasse zu einem HTML-Element wird die Verbindung hergestellt. Beispielsweise könnte man eine CSS-Regel mit dem Klassennamen .rot definieren und als Schriftfarbe Rot festlegen. Wenn man einem HTML-Element diese Klasse zuweisen möchte, muss man dem HTML-Tag die Klasse über das Attribut class="rot" (ohne Punkt) zuweisen. Ein Beispiel.

<h1 class="rot">Überschrift</h1>

Klassenname

Bei der Vergabe des Klassennamens ist man ziemlich frei, jedoch gelten einige Einschränkungen. Zunächst hängt der Zeichenvorrat von der Zeichenkodierung ab. Die Verwendung von Zeichen außerhalb der verwendeten Zeichenkodierung ist nicht möglich. Hierbei muss man zwischen der Zeichenkodierung auf den HTML-Seiten und in den CSS-Dateien unterscheiden. Werden die CSS-Stile inline eingefügt, so gilt für sie automatisch die Zeichenkodierung der HTML-Seite. Werden die CSS-Stile in CSS-Dateien ausgelagert, so haben diese Dateien eine eigene Zeichenkodierung. Um Inkonsistenzen zu vermeiden, sollte man sie jedoch identisch mit der Zeichenkodierung der HTML-Seiten halten und idealerweise sollte das UTF-8 sein.

Mit UTF-8 hat man den größten Spielraum bei den verwendbaren Zeichen. Allerdings gelten auch hier Einschränkungen und man kann nicht jedes Zeichen aus dem Zeichenvorrat verwenden. Gemäß den Spezifikationen sind folgende Zeichen möglich.

  • Die Zeichen A - Z (Großbuchstaben)
  • Die Zeichen a - z (Kleinbuchstaben)
  • Die Ziffern 0 - 9
  • Das Zeichen U+00A1 und höher aus "Universal Character Set" nach ISO/IEC 10646 (praktisch identisch mit Unicode)
  • Der Bindestrich -
  • Der Unterstrich _

Die Namen dürfen nicht mit einer Ziffer oder mit einem Bindestrich und Ziffer beginnen. Es können außerdem alle Zeichen verwendet werden, die mit einem Backslash (\) "escaped" sind oder als numerischer Code (Hexadezimal) geschrieben werden.

Beispiel 1: Die Zeichen ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª sind gemäß Unicode nicht unterhalb von U+00A1 und können somit verwendet werden, ohne mit einem Backslash escaped zu werden. Der folgende Klassenname wäre mit UTF-8 möglich.

.¡¢£¤¥¦§¨©ª {
font-size: 14px;
}

Die Klasse könnte man z.B. einem Absatz zuweisen.

<p class="¡¢£¤¥¦§¨©ª">Beispieltext</p>

Beispiel 2: Die Sonderzeichen ! " # $ % & ' ( ) * + , - . / : ; < = > ? @ [   ] ^ ` { | } ~ sind gemäß Unicode unterhalb von U+00A1 und müssen escaped oder numerisch angegeben werden. Zum Escapen setzt man dem Zeichen ein Backslash voran. Möchte man einen Klassennamen mit diesen Sonderzeichen, könnte man die CSS-Regel wie folgt angeben.

.\!\"\#\$\%\&\'\(\)\*\+\,\-\.\/\:\;\<\=\>\?\@\[\]\^\`\{\|\}\~ {
font-size: 14px;
}

Somit hätte man eine Klasse mit dem Namen !"#$%&'()*+,-./:;<=>?@[]^`{|}~ definiert und könnte sie z.B. einem Absatz zuweisen. Hierbei muss man jedoch beachten, die Zeichen " < > als Entität (maskiert) anzugeben, da sie in HTML eine besondere Bedeutung haben. Den Klassennamen würde man einem Absatz wie folgt zuweisen.

<p class="!&quot;#$%&'()*+,-./:;&lt;=&gt;?@[]^`{|}~">Beispieltext</p>

So hat man bei der Wahl des Klassennamens zumindest in UTF-8 alle Freiheiten. Der Übersichtlichkeit halber sollte man auf Sonderzeichen jedoch verzichten. Man sollte sich auch angewöhnen, alle Klassennamen in Kleinbuchstaben anzugeben.

Klassenselektor mit Elementselektor verknüpfen

Eine Klassenselektor ist frei und nicht an ein HTML-Element gebunden. Über das Attribut class="..." kann man sie verschiedenen HTML-Elementen zuweisen, z.B. Überschriften, Absätzen oder Tabellen. Soll eine Klasse nur für ein bestimmtes HTML-Element gelten, kann man einen Klassenselektor mit einem Elementselektor verknüpfen. In solchen Fällen hätte die Zuweisung auf andere HTML-Elemente keine Auswirkung. Zum Verknüpfen schreibt man zuerst den Elementselektor und danach mit einem Punkt den Klassenselektor. Ein Beispiel, um die Klasse .rot mit dem Elementselektor p zu verknüpfen.

p.rot {
font-size: 14px;
}

Würde man die Klasse über das Attribut class="rot" einer Überschrift zuweisen, hätte das keine Auswirkung, da sie mit dem Element p verknüpft ist und somit nur für Absätze gilt.

ID-Selektor

HTML-Elementen kann man mit dem Attribut id="..." eine eindeutige ID zuweisen. Sie darf innerhalb einer Seite nur einem Element zugewiesen werden. Mit dem ID-Selektor kann man per CSS das Element formatieren. Ein ID-Selektor wird mit einem Rautezeichen (#) und der ID des Elements angegeben, mit dem das Element bezeichnet wurde.

ID-Selektor

Attributselektor

Die Liste der Einfachselektoren wird mit den Attributselektoren komplettiert. Damit kann man den Elementen Stile zuweisen, die ein bestimmtes Attribut haben. Beispielsweise könnte man allen Elementen ein CSS-Stil zuweisen, die das Attribut alt="..." beinhalten. Ganz gleich, ob den Attributen Werte zugewiesen wurden oder nicht.

Attributselektor

Man kann bei der Verwendung von Attributselektoren die Zuweisung der CSS-Stile auch davon abhängig machen, ob den Attributen bestimmte Werte zugewiesen wurden. Dabei gibt es folgende Unterscheidungen.

/* Attribut kann leer sein oder beliebige Werte enthalten */
[attributname] { } /* Syntax */
[alt] { padding: 5px; } /* Beispiel */

/* Attribut mit dem exakt angegebenem Wert */
[attributname="Wert"] { } /* Syntax */
[alt="Bild"] { padding: 5px; } /* Beispiel */

/* Attribut enthält bei mehreren Werten den exakt angegebenen Wert */
[attributname~="Wert"] { } /* Syntax */
[alt~="Bild"] { padding: 5px; } /* Beispiel */

/* Attribut beginnt mit dem angegebenem Wert */
[attributname^="Wert"] { } /* Syntax */
[alt^="Bil"] { padding: 5px; } /* Beispiel */

/* Attribut endet mit dem angegebenem Wert */
[attributname$="Wert"] { } /* Syntax */
[alt^="ild"] { padding: 5px; } /* Beispiel */

/* Attribut enthält den angegebenen Wert */
[attributname*="Wert"] { } /* Syntax */
[alt*="il"] { padding: 5px; } /* Beispiel */

/* Attribut enthält ein Segment aus einer Liste,
in der die Segmente durch Bindestriche getrennt sind */
[attributname|="Wert"] { } /* Syntax */
[lang|="de"] { font-family: Arial; } /* Beispiel für Attribut lang="de-DE"*/

Attributselektor verknüpfen mit anderen Selektoren

Ein Attributselektor kann auch mit anderen Selektoren verknüpft werden. Beispielsweise könnte man den Attributselektor mit dem IMG-Tag verknüpfen, sodass der Stil nur bei diesen Elementen angewendet werden würde. Beim folgenden Beispiel werden die Stile nur bei IMG-Tags mit dem Attribut title angewendet, wenn der Wert des Titel-Attributs das Wort "Bildtitel" enthält.

img[title*="Bildtitel"] { padding: 5px; }

Möchte man ein Attributselektor mit einem ID- oder Klassenselektor verknüpfen, müssen diese mit einem Leerzeichen voneinander getrennt werden. Ein Beispiel.

#id-bezeichnung [title*="Bildtitel"]
{
padding: 5px;
}

.klassenname [title*="Bildtitel"]
{
padding: 5px;
}

Daneben sind auch weitere Verknüpfungen über Kombinatoren möglich. Beispielsweise könnte man bei der Verknüpfung mit dem Klassenselektor zusätzlich den Elementselektor img einfügen. Dann würden die Stile nur dann angewendet werden, wenn sich das IMG-Tag in einem Element befindet, dem die entsprechende Klasse zugewiesen wurde.