Arbeitshilfen

CSS3 - Selektoren

Bei der ganzen Begeisterung über Rahmendesigns mit abgerundeten Ecken und Ähnlichem lässt man oft eine wichtige und mächtige Neuerung von CSS3 außer Acht: die Selektoren.

internet, webdesign, css3, selektoren, html, css3 selektoren

© Internet Magazin

internet, webdesign, css3, selektoren, html, css3 selektoren

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, webdesign, css3, selektoren, html, css3 selektoren

© Internet Magazin

Das CSS3-Selektor-Modul ist beim W3C bereits im Status einer "proposed recommendation".

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;
}

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…