Kategorien
Design HTML/CSS

CSS for Runaways: 5 unterschätzte Selektoren

In CSS gibt es jede Menge interessanter Selektoren, die kaum jemand kennt, geschweige denn benutzt, und das hat in erster Linie zwei Gründe. Zum einen scheint es so, als ob die lange Zeit gültigen Beschränkungen des IE6 irgendwann zur Gewohnheit geworden sind. Zum anderen enthält der von CMSystemen erzeugte Quelltext oft viele Klassen, die dann auch für das Styling genutzt werden. Trotzdem oder gerade deswegen lohnt sich ein Blick auf die neuen Selektoren, von denen dieser Artikel fünf kurz vorstellt.

HTML5_sticker

Nummer 1. Der Kindselektor: > selektiert nur Kindelemente.

Nachfahrenselektoren sind weit verbreitet. ul li zum Beispiel selektiert alle Listenelemente innerhalb einer ungeordneten Liste.

Wenn man aber zwischen den beiden Typselektoren statt der Leerstelle ein Größer-als-Zeichen setzt, werden nicht mehr alle Nachfahren, sondern nur noch Kindelemente selektiert.

Kinder sind Elemente, die in der DOM-Hierarchie genau eine Stufe tiefer stehen. ul > li wählt also nur die Listenelemente der ersten Ebene aus. Die Leerstellen links und rechts vom Größer-als-Zeichen sind übrigens optional, machen die Sache aber besser lesbar.

Besonders in verschachtelten Listen wie Navigationen mit mehreren Ebenen ist der Kindselektor sehr praktisch, da man zum Beispiel Einrückungen für die unteren Ebenen nicht erst wieder zurücksetzen muss.

Folgender Selektor entfernt innerhalb einer Navigationsliste mit mehreren Ebenen das padding-left nur für die erste Ebene:

nav > ul { padding-left: 0; } 

Die folgende Abbildung zeigt die Auswirkung dieses Selektors.

abbildung1-kindselektoren
Ein Kindselektor wählt nur die erste Ebene aus.

Ein herkömmlicher Nachfahrenselektor wie nav ul hätte die Einrückung auch für die verschachtelten Listen entfernt, die man dann mühsam wiederherstellen müsste.

Nummer 2. Attributselektoren haben [eckige] Klammern

Der einfachste Attributselektor überprüft nur das Vorhandensein eines Attributs: a[title] selektiert alle Links mit dem Attribut title.

Mit einem Gleichheitszeichen kann man einen Attributselektor auf einen bestimmten Wert einschränken, was besonders in Formularen sehr nützlich ist. Hier zwei Beispiele:

input[type=”email”] 
input[type=”submit”] 

Das Gleichheitszeichen kann durch eine Tilde, ein Hütchen, ein Dollarzeichen oder Sternchen erweitert werden, die folgende Bedeutungen haben:

  • [attr^="zeichen"] = "zeichen" am Anfang des Wertes
  • [attr$="zeichen"] = "zeichen" am Ende des Wertes
  • [attr*="zeichen"] = "zeichen" irgendwo im Wert

Dadurch gibt es besonders für Links einige interessante Möglichkeiten:

  • a[href^="http"] selektiert alle Links mit http am Anfang
  • a[href$=".pdf"] gestaltet alle Links auf PDF-Dateien
  • a[href*="wikipedia.org"] wählt alle Links zur Wikipedia

Fehlt nur noch die Tilde ~. Der Selektor [attr~="zeichen"] wählt alle Elemente, die in einem bestimmten Attribut unter anderem diesen Wert haben, und zwar mit einer Leerstelle davor und dahinter. Das ist besonders praktisch, wenn ein Attribut mehrere Werte hat, wie es zum Beispiel bei Klassen oft der Fall ist:

[class~="grid4"] selektiert alle Elemente mit der Klasse grid4, auch wenn Sie noch weitere Klassen enthalten, wie z. B. <div class="info grid4 box">.

Nummer 3. Die Pseudoklassen :first-child und :last-child

Pseudoklassen heißen so, weil damit zwar wie mit einer Klasse eine Gruppe von Elementen ausgewählt wird, dabei aber im HTML das Attribut class nicht auftaucht.

Besonders nützliche Vertreter dieser Gattung sind :first-child und :last-child, mit denen das erste bzw. das letzte einer Reihe von Geschwistern ausgewählt werden.

So wird in Navigationslisten der erste und der letzte Menüpunkt oft etwas anders gestaltet. Im folgenden Beispiel bekommt zunächst jedes Listenelement rechts eine senkrechte Rahmenlinie:

nav li { border-right: 1px solid #ccc; }

Um dem ersten Listenelement auch links eine senkrechte Linie zu geben, bietet sich :first-child an:

nav li:first-child { border-left: 1px solid #ccc; }  

Die folgende Abbildung zeigt dieses Beispiel im Browser:

abbildung2-first-child
Der Selektor :first-child fügt die erste Rahmenlinie hinzu.

Nummer 4. :nth-child() ist der Zauberstab für Kinder

Mit Pseudoklassen können Sie wie eben gesehen ganz einfach das erste und das letzte Kind eines Elements ansprechen, aber das ist noch lange nicht alles, denn mit :nth-child() können Sie richtiggehend zaubern, was die Auswahl von Kindern angeht.

Der englische Ausdruck the nth child heißt frei übersetzt soviel wie "das xte Kind" oder auch "das soundsovielste Kind". Das "n" ist ein Platzhalter für Ordnungszahlen wie first, second, third und so weiter.

Die Zaubertricks zum Auswählen von Kindelementen werden durch das Klammernpaar nach der Pseudoklasse möglich. Zunächst einmal kann man dort einfache ganze Zahlen notieren: :nth-child(2) wählt zum Beispiel das zweite Kind aus.

Mit :nth-child() können Sie zum Beispiel vier aufeinanderfolgende Listenelemente auswählen und ihnen eine unterschiedliche Hintergrundfarbe zuweisen:

nav li:nth-child(1) { background-color: #058; }
nav li:nth-child(2) { background-color: #069; }
nav li:nth-child(3) { background-color: #07b; }
nav li:nth-child(4) { background-color: #08c; }

abbildung3-nth-child.jpg
;Die Pseudoklasse :nth-child() in Aktion

Die Klammern von :nthchild() können aber nicht nur Zahlen aufnehmen, sondern auch einfache Ausdrücke nach dem Muster :nth-child(an+b), wobei "a" und "b" für beliebige ganze Zahlen stehen. Die Möglichkeiten von :nth-child() tendieren gegen unendlich und zum Üben gibt es auf css-tricks.com ein sehr schönes Tool. Link siehe unten.

:nth-child() ist besonders bei Listen und Tabellen sehr nützlich, denn dort gibt es für ein Elternelement in der Regel viele gleichartige Kindelemente.

Nummer 5. Die Pseudoklasse :target

Mit der Pseudoklasse :target kann man das Sprungziel eines Hyperlinks hervorheben. Ein sehr schönes Beispiel dafür findet sich in der Wikipedia. Wenn man dort auf ein hochgestelltes Fußnotenzeichen klickt, springt man zu der Fußnote auf derselben Seite weiter unten. Diese Fußnote wird mit der Pseudoklasse :target farblich hervorgehoben.

abbildung4-target
Die angeklickte Fußnote wird per :target hervorgehoben.

Der Link <a href="#cite_note-2">[2]</a> springt zu der Fußnote <li id="cite_note-2"> unten auf der Seite. Dadurch wird der Zusatz #cite_note-2 an das Ende der URL gehängt und das Element mit dieser ID durch das folgende CSS hervorgehoben:

ol.references > li:target { background: #def; }  

Das Pfiffige an :target ist, dass das li-Element nur hervorgehoben wird, wenn vorher auf den Link geklickt wurde, der die ID des Listenelementes aufruft.

Mit dem geschickten Einsatz von :target kann man zum Beispiel CSS-only-Lösungen für mobile Navigationen oder Akkordeons erstellen.

Links zum Beitrag

Falls Sie diesen kurzen Exkurs in die Welt der modernen Selektoren interessant fanden, gibt es in Kapitel 8 meines Buches noch eine Menge mehr davon:
Infos zu »Flexible Boxes«

(dpe)

Von Peter Müller

Ich bin Autor, Dozent und Webworker. Meine Spezialität ist es, komplizierte und 'trockene' Sachverhalte auf einfache und unterhaltende Weise darzustellen. Sie kennen mich vielleicht durch meine Bücher wie "Einstieg in WordPress", "Flexible Boxes" oder "Einstieg in CSS".

12 Antworten auf „CSS for Runaways: 5 unterschätzte Selektoren“

die Illustrationen sind nicht immer so klar, vor allem bei first-child sieht man nicht, was gezeigt werden soll…

ich finde die Attribute „odd“ und „even“ bei nth-child erwähnenswert, damit läßt sich auf einfachste Weise eine „Zebraliste“ erstellen…

Bei der Grafik ist ein bisschen unglücklich, dass der weiße Hintergrund fließend in den Beitrag selbst übergeht, aber der obere (Navi mit border-left) und der untere Teil (Devtool mit HTML und CSS) zusammen sind doch eigentlich deutlich, oder?

Die Kurzformen stehen im Buch:
:nth-child(2n) entspricht :nth-child(even)
:nth-child(2n+1) entspricht :nth-child(odd)
Ich habe sie im Artikel weggelassen, weil der eh schon zu lang war…

Die CSS Kind-Selektoren sollte man aber sehr sparsam verwenden, weil die Performance des Browser Renderings dadurch in die Knie geht. Deswegen haben wir die Selektoren damals einem Gurken-Browser IE5, IE6 erst recht nicht angetan… ;-)

Hallo,

bei Nummer 5 ist im beispielhaften Code ein Fehler zu finden: ol.references > li:target { backgroudn: #def; }

Dort sind die Zeichen dn von background vertauscht.

Ansonsten echt gut.

Hallo Antoni,
danke für das Kompliment. Mehr davon gibt’s in Kapitel 8 von „Flexible Boxes“. Den Link zur Infoseite findest du am Ende des Beitrags. In Kapitel 11 wird dann mit :target eine mobile Navigation entwickelt ;-)

Vielen Dank für diesen Beitrag. Besondern die Pseudoklassen „:first-child“ und „nth-child()“ sind sehr interessant. Wie oft ich vergeblich versucht habe, ein vertikales Menü mit 1px als Border zu deklarieren. Endlich die Lösung!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.