CSS3 - Selektoren

1. CSS3 - Selektoren
2. Formatierungen für Formulare
3. Browserunterstützung

© Internet Magazin

Selektoren dienen in CSS zur Auswahl von Elementen. Die bekanntesten Selektoren sind sicher der Klassenselektor .class oder der id-Selektor #id. Die jetzt neu in CSS3 definierten Selektoren ermöglichen eine detaillierte Auswahl von Elementen - ohne dass man diese eigens über Klassen oder IDs markieren müsste. Das hält den HTML-Code schlanker, erlaubt rasche Anpassungen und bietet eine bessere Performance. Wir stellen Ihnen die wichtigsten CSS3-Selektoren vor, widmen uns dem Thema Browserunterstützung und zeigen Alternativlösungen für ältere Browser.

Abzählreime

Wer schon einmal eine Zebratabelle von Hand durch Zuweisung von Klassen erstellt hat, weiß, wie mühsam das bei umfangreichen Tabellen ist. Und falls irgendwo mittendrin noch eine Zeile ergänzt wird, geht das Ganze von vorn los.Mit CSS3 ist das einfacher. Genau für Zebratabellen und Co. gibt es nun die Pseudoklasse :nth-child(). Damit lässt sich das n-te Kindelement auswählen. Gehen wir von folgendem HTML-Code aus:

<ul id="liste"><li>A</li><li>B</li><li>C</li><li>D</li></ul>

Und folgendem CSS-Code:

li:nth-child(2n) {
background-color: green;
}

Dann wird über diesen CSS-Code jedes zweite li-Element angesprochen und mit einem grünen Hintergrund versehen, also die Punkte mit den Inhalten B und D.Die Angabe in Klammern beim Pseudoelement :nth-child() hat allgemein die Form an + b, wobei a und b durch beliebige Zahlen ersetzt werden können und auch 0 möglich ist. Hier einige Beispiele:

• :nth-child(2n) wählt alle geraden Kindelemente aus. Weil das so häufig gebraucht wird, gibt es dafür die Abkürzung :nth-child(even).
• :nth-child(2n+1) beschränkt die Auswahl auf die ungeraden Kindelemente und lässt sich auch als :nth-child(odd) schreiben.
• :nth-child(3n) wählt jeweils das dritte Element aus.

Vor die Angabe :nth-child() schreiben Sie das jeweilige Kindelement, das Sie auswählen möchten:

© Internet Magazin

li:nth-child(4n) wählt jedes vierte Listenelement aus, p:nth-child(even) jeweils die geraden Absätze - natürlich immer nur diejenigen mit demselben Elternelement. Sinnvoll ist die Angabe von :nth-child() immer dort, wo es mehrere gleichartige Kindelemente gibt - also bei den Zeilen einer Tabelle (tr) oder den Listenpunkte (li), aber etwa auch bei mehreren Absätzen oder div-Elementen. So könnte man beispielsweise Kommentare immer abwechselnd einfärben.Sie können auch nur einen Wert in Klammern hinter :nth-child() angeben, also beispielsweise :nth-child(1), womit Sie das erste Kindelement auswählen. Durch den Selektorausdruck #content p:nth-child(1) wählen Sie in folgendem Beispiel das erste p-Kindelement in einem Bereich mit der id="content" aus:

<p>nicht ausgewählt</p><div id="content"><p>ausgewählt</p><p>nicht ausgewählt</p></div>

Statt :nth-child(1) können Sie auch :firstchild schreiben. Parallel dazu wählt :lastchild das letzte Kindelement aus. Ein praktischer Einsatzbereich für :first-child und :last-child sind beispielsweise Menüleisten: Hier benötigen häufig der erste oder der letzte Punkt eine Sonderbehandlung - etwa weil sie einen zusätzlichen Rahmen oder etwas mehr Abstand brauchen. Über die CSS3-Selektoren gelingt die Auswahl, ohne dass Sie diese Elemente durch Klassen kennzeichnen müssen.

Noch spezieller

Bei folgendem leicht geändertem Quellcode wird durch #content p:nth-child(1) nichts ausgewählt, da das erste Kindelement von #content kein p-Element ist:

<p>nicht ausgewählt</p><div id="#content"><h2>nicht ausgewählt</h2><p>nicht ausgewählt</p><p>nicht ausgewählt</p></div>

Wollen Sie hingegen das erste p-Kindelement in diesem Fall auswählen, bei dem andere Elemente davorstehen, so benötigen Sie den Selektor p:nth-of-type(1). Der Selektor :nth-of-type(n) wählt im Allgemeinen das n-te Element des angegebenen Typs aus. In Klammern können Sie dieselben Angaben machen wie bei :nth-child().Für das erste und das letzte Element seines Typs gibt es die Abkürzungen :first-of-type und :last-of-type. Neu ist ebenfalls der Selektor empty(), über den sich die leeren Elemente selektieren lassen. Er wählt Elemente aus, die weder Text noch andere Elemente beinhalten. Das kann bei Tabellen praktisch sein, um Tabellenzellen ohne Inhalt umzuformatieren. Ein Beispiel dazu sehen Sie etwas später.

Das Ziel vor Augen

Die freie Enzyklopädie Wikipedia enthält in vielen Artikeln einige Fußnoten mit Verweisen, woher die Informationen stammen. Wenn Sie bei einem Artikel einmal auf eine der hochgestellten Ziffern klicken, gelangen Sie direkt zur entsprechenden Fußnote im unteren Bereich. Und sofern Sie nicht gerade mit einem älteren Internet Explorer unterwegs sind, wird die Fußnote, zu der Sie gesprungen sind, hellblau hinterlegt. Eine praktische Hilfestellung für die Benutzer, um direkt die richtige Fußnote zu sehen.Realisiert ist die Verknüpfung von hochgestellter Fußnote zur Anmerkung im unteren Bereich natürlich über einen internen Link. Für die Hervorhebung der Anmerkung ist folgender Code zuständig:

// Hervorhebung der angeklickten Fussnoten und der Rueckverweis in blau
ol.references > li:target,
sup.reference:target {
background-color: #def;
}