CSS: Beispiele zur Nutzung der Selektoren

[mitaki]

Wuhu. Selektoren sind ein härterer Brocken als man glauben möchte.

Beispiele zur Nutzung der Selektoren

Was sind Selektoren?

Informationen in HTML bzw. XML-Dokumenten befinden sich innerhalb von Elementen. Diese Elemente werden verschachtelt, was man als Baumstruktur abbilden kann. Selektoren für Stilangaben sind eine Art vereinfachte Wegbeschreibung zu bestimmten Elementen in dieser Baumstruktur. Ein Selektor kann ein bestimmtes aber auch viele gleichartige Elemente auswählen. Diese Elemente erhalten dann die Eigenschaften, die dem Selektor zugewiesen wurden.

Beispiel:

Code:

Selektor, kombinierter Selektor {
 Eigenschaft: Wert;
}

Den vorliegenden Code bezeichnet man als Regel. Eine Regel beginnt mit einem Selektor. Nach dem Selektor können, von einem Komma getrennt, weitere Selektoren stehen. Dabei sind nicht nur eifache Selektoren möglich, sondern auch Kombinationen aus verschiedenen Selektoren.
Nach dem Selektor bzw. der Liste der Selektoren folgen innerhalb geschweifter Klammern Eigenschaften, denen ein Wert zugewiesen wird. Diese Eigenschaften werden auf jedes Element in der HTML-Baumstruktur angewendet, die von den Selektoren dieser Regel betroffen sind.

Im folgendem eine Übersicht aller Selektoren - mit Ausnahme von Pseudoklassen und -elementen -, die in CSS 2.1 gültig sind.

Einfache Selektoren

Ein einfacher Selektor ist ein Selektor, der ein Element unabhängig von seiner Position in der Baumstruktur des Dokuments auswählt.

* - Der Universalselektor

Eigenschaften, die für diesen Selektor definiert werden, gelten für alle Elemente in einem Dokument.
(Wobei ich anmerken muss, dass man damit keine Kommentare oder HTML-Elemente wie <title> sichtbar machen kann.).

Beispiel:

Code:

* {
 margin: 0; padding: 0;
}

Diese so genannte Leerraumrücksetzung sorgt dafür, dass keines der Elemente über Außen- und Innenabstände verfügen.
Das hat einerseits den Vorteil, dass Regeln verschiedener Browser dem Gestaltungsprozess nicht im Wege stehen. Andererseits bringt es aber auch den Nachteil, dass viele Standardelemente mit neuen Formatierungen versehen werden müssen, was die Stildatei aufbläht.

Hinweis: Im Internet Explorer 7 werden von diesem Selektor fälschlicherweise auch Kommentare ausgewählt. Diese kann man z.B. durch Angaben von display- und Höhen- oder Breitenangaben sichtbar machen.

E - Der Elementselektor

Wird dem einfachen Selektor E eine Eigenschaft zugewiesen, so erhalten alle E-Elemente im Dokument diese Eigenschaft.

Beispiel anhand einer Überschrift:

Code:

h1 {
 display: block;
 font-size: 2em;
 margin: 0 0.5em;
}

Diese Regel besagt, dass alle h1-Elemente als Blockelement dargestellt werden, eine Schriftgröße von 2em sowie oben und unten einen Außenabstand von einem halben em besitzen.
Das entspricht etwa der Voreinstellung Zahlreichen Browser, welche beliebig verändert werden kann.

[attr] - Der erste Attributselektor

Es ist möglich, bestimmte Eigenschaften nur den Elementen zuzuweisen, die ein bestimmtes Attribut besitzen.

Beispiel:

Code:

[usemap] {
 border: 2px dashed lime;
}

Diese Regel würde alle Elemente hervorheben (mit einem leuchtend grünen Rahmen), die verweissensitiv sind, z.B. Bilder, da nur bei verweissensitiven Elementen das usemap-Attribut gesetzt wird.

[attr=val] - Der zweite Attributselektor

Eine speziellere Variante des Attributselektors erlaubt es, nur die Elemente zu formatieren, die über ein Attribut mit einem bestimmten Wert verfügen.

Beispiel:

Code:

[method=post] {
 background-color: green;
}

Diese Regel formatiert nur Formulare, die über die POST-Methode versendet werden, mit einer grünen Hintergrundfarbe.

Ein Element wird nur dann formatiert, wenn der Wert des Attributs identisch mit dem Wert des Selektors ist. Es ist auch möglich, den Wert eines Attributs im Selektor mit doppelten oder einfachen Anführungszeichen zu versehen. Das ist vor allem dann wichtig ist, wenn der Attributwert Leerzeichen oder andere spezielle Zeichen enthält.

[attr~=val] - Der dritte Attributselektor

Der Selektor [attr~=val] wählt nur Elemente aus, wenn diese im Attribut „attr“ den Wert „val“ als Wort enthalten.

Beispiel (Stilangabe):

Code:

[summary~=Statistik] {
 background-color: violet;
}

Diese Regel selektiert in diesem Beispiel alle drei Tabellen, weil das Wort „Statistik“ durch ein normales Leerzeichen bzw. die Anführungszeichen des Attributs vom Rest des Attributs getrennt ist.

Beispiel (HTML):

HTML-Code:

<table summary="Statistik über die Browserverwendung.">
<!-- Restlicher Quelltext -->
<table summary="Noch eine Statistik über die Browser.">
<!-- Restlicher Quelltext -->
<table summary="Eine ganz andere Statistik">
<!-- Restlicher Quelltext -->

[attr|=val] - Der vierte Attributselektor

Dieser Selektor wählt alle Elemente aus, die über ein „attr“-Attribut verfügen, welches mit dem Wert „val“ beginnt und dieser Wert mit einem „-“ vom Rest des Wertes abgetrennt ist.

Beispiel (Stilangabe):

Code:

[hreflang|=de] {
 background-color: #blue;
}

Diese Regel formatiert jeden Verweis mit einer blauen Hintergrundfarbe, wenn das Verweisziel in deutscher Sprache vorliegt.

Beispiel (HTML):

HTML-Code:

<p><a href="http://www.google.de/" hreflang="de-DE">Google</a> wird formatiert.<br />
<a href="http://www.google.at/" hreflang="de-AT">Google</a> wird formatiert.<br />
<a href="http://www.google.com/" hreflang="en-US">Google</a> wird *nicht* formatiert.</p>

# - Der ID-Selektor

Der Selektor „#name“ formatiert genau das Element im Dokument, das als Wert des id-Attributs „name“ enthält.

Beispiel (Stilangabe):

Code:

#inhalt {
 font-color: #fff;
 background-color: #000;
}

Beispiel (HTML):

HTML-Code:

<div id="inhalt">
<p>Dieser Text ist in weißer Farbe auf schwarzem Hintergrund geschrieben.</p>
<!-- Die Schriftfarbe wurde auf das p-Element weitergegeben! -->
</div>

Als Attributselektor kann man ID-Selektoren wie folgt ausdrücken: „#name“ = „[id=name]“.

. - Der Klassenselektor

Ein Selektor „.name“ formatiert ein Element, wenn dieses zur Klasse „name“ gehört. In HTML und XHTML werden Klassennamen im class-Attribut vergeben. In XML-Dialekten kann das Attribut für Klassenzugehörigkeit einen anderen Namen besitzen.

Beispiel (Stilangabe):

Code:

.hervorgehoben {
 font-weight: bold;
}

Beispiel (HTML):

HTML-Code:

<p class="hervorgehoben">Dieser Text ist hervorgehoben.</p>
<p>Dieser Text ist nicht hervorgehoben.</p>
<p class="hervorgehoben">Dieser Text ist hervorgehoben.</p>

Als Attributselektor kann man Klassenselektoren in (X)HTML wie folgt ausdrücken: „.name“ = „[class=name]“.

Kombinierte Selektoren

E F - Der Nachfahrenselektor

Um ein F-Element formatieren zu können, das sich irgendwo innerhalb des E-Elements befindet, kann man den Nachfahrenselektor verwenden. Das ist ein Selektor der aus zwei einfachen Selektoren - getrennt von einem Leerzeichen - besteht.
Das ist wohl der wichtigste Selektor!

Beispiel (Stilangabe):

Code:

#navigation a {
 color: green;
 background-color: lime;
}

Diese Regel formatiert alle Verweise, die sich innerhalb eines Elements mit der ID „navigation“ befinden. Dabei spielt es keine Rolle, ob das a-Element ein Kind oder ein Nachfahre dieses Elements ist.

Beispiel (HTML):

HTML-Code:

<div id="navigation">
<a href="./beispiel.html">Beispielverweis (Kind).</a>
<ul>
<li><a href="./beispiel.html">Beispielverweis (Nachfahre).</a></li>
</ul>
</div>

E > F - Der Kindselektor

Es ist auch möglich nur Elemente zu formatieren, die Kinder eines Elements sind. Das erreicht man, wenn man das Elternelement als Selektor mit einem „größer als“ Zeichen vom Kindelement trennt.

Beispiel (Stilangabe):

Code:

ul > .aktiv {
 font-weight: bold;
}

Diese Regel formatiert alle Listenpunkte der Klasse „aktiv“ mit fetter Schrift, nicht jedoch andere Elemente mit dieser Klasse.

Beispiel (HTML):

HTML-Code:

<ul>
<li class="aktiv">Fette Schrift, weil li ein Kindelement von ul ist.</li>
<li><a class="aktiv" href="./beispiel.html">Beispielverweis (nicht fett, weil a kein Kind von ul ist).</a></li>
<li>Anderer Listenpunkt</li>
</ul>

Bei der Verwendung dieses Selektor sollte man darauf achten, keine Kette von Selektoren zu erstellen, wo statt „E > A > F“ ein „E F“ genügen würde.

E + F - Der Folgeselektor

Nicht immer sind die Kinder und Nachfahren eines Elements relevent. Es kommt auch vor, dass die Nachbarn eines Elements von bedeutung sind.

Beispiel (Stilangabe):

Code:

p + p {
 font-weight: bold;
}

Diese Regel formatiert die Schrift in allen Absätzen fett, die auf einen Absatz folgen.

Beispiel (HTML):

HTML-Code:

<p>Dieser Absatz folgt auf keinen Absatz, es ist das erste Element in dieser Reihe.</p>
<p>Dieser Absatz ist fett formatiert, da er auf ein p-Element folgt.</p>
<p>Das gilt auch für diesen Absatz und alle folgenden Absätze.</p>
<div>Außer auf den folgenden, der auf ein div-Element folgt.</div>

Kombinationen anderer einfacher Selektoren

Den Attribut-, ID-, und Klassenselektoren kann ein einfacher Selektor vorgestellt werden, wodurch sich diese auf bestimmte Elemente spazialisieren lassen.

Beispiel:

Code:

a[href] {
 /*Ein a Element das über ein href-Attribut verfügt*/
}
div#inhalt {
 /*Ein div-Element mit der ID 'inhalt'. bei IDs ist diese Angabe allerdings nicht sehr hilfreich,
 da IDs nur einmal in einem Dokument vorkommen dürfen.*/
}
p.wichtig {
 /*Nur wichtige Absätze werden formatiert. wichtige Listen könnten andere Formatierungen erhalten!*/
}

Außerdem sind bestimmte einfache Selektoren identisch mit kombinierten Selektoren:

• [att] ist identisch zu *[att], da alle Elemente mit diesem Attribut selektiert werden.
• #name und .name sind identisch zu *#name und *.name, da alle Elemente mit dieser ID oder Klasse ausgewählt werden.

[drunken monkey]

Vielen Dank, sehr hilfreiche Liste! ^^
Die Attributselektoren habe ich z.B. noch gar nicht gekannt...o_O

Noch eine Frage: weißt du, inwieweit Kind- und Folgeselektor vom IE unterstützt werden? Ich denke, bis inkl. Version 6 hat er solche Selektoren ja komplett ignoriert. Wie ist das denn im 7er?

[mitaki]

Der Internet Explorer 6 kennt leider weder Attribut- noch Kind- (E > F) und Folgeselektoren (E + F).
Der Internet Explorer 7 dagegen kennt alle hier aufgeführten Selektoren, allerdings nur im standardkonformen Modus (sollte ja kein Problem sein).