Kategorien
HTML/CSS

Diese CSS-Selektoren solltest Du kennen

In CSS gibt es jede Menge interessanter Selektoren, die versierten Frontend-Entwicklern zwar grundsätzlich bekannt sind, die dennoch oftmals nur sparsam zum Einsatz kommen.

Anzeige

Das liegt unter anderem daran, dass der von CM-Systemen erzeugte Quelltext oft viele Klassen benutzt, die dann auch für das Styling genutzt werden. Dabei sind diese Selektoren unheimlich mächtige Werkzeuge, die dir viele Stunden Arbeit ersparen und die Code-Basis vereinfachen können.

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 >-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.

Anzeige

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.

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">.

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.

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.

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. Hier geht es zum :nth Tester von CSS Tricks.

CSS-Attribut- und Wertselektoren

Wussten Sie, dass Sie Elemente nicht nur nach dem Namen des Attributs auswählen können, sondern auch nach dem Wert dieses Attributs? Ich selber wusste das lange Zeit nicht und habe lange Zeit nur CSS-Klassen und IDs verwendet.

So geht die Auswahl per CSS-Attribut

Angenommen, Sie möchten alle HTML-Tags auswählen, in denen das Attribut “Name” enthalten ist:

<input name="email" value="" />

Das ist das CSS, das Sie brauchen:

input[name] {
/* styles */
}

Sie denken wahrscheinlich, dass dies ziemlich nutzlos ist, da fast alle Eingaben ein “Name” -Attribut haben und mit Ihnen übereinstimmen.

Auswahl nach Attribut und Wert

Wenn Sie mehrere Websites erstellt haben, haben Sie wahrscheinlich Ihre eigenen Namenskonventionen für Tags entwickelt. In meinem Fall verwende ich bei jedem Kontaktformular name = ”email” für das E-Mail-Feld. Um dieses spezielle Feld zu formatieren, könnte ich ihm ein Klassenattribut mit dem Wert “email” zuweisen. Warum nutze ich jedoch nicht eine bereits eingegebene Funktion, um alle Eingabetags mit dem Attribut “name” mit CSS zu formatieren?

So würde das aussehen.

input[name=email] {
/* styles */
}

Diese Selektoren sind schon sehr praktisch, aber es geht noch besser. Schauen Sie sich unseren Beitrag über CSS-Selektoren mit regulären Ausdrücken an, um beispielsweise ganz gezielt nur eine PDF-Datei anzuwählen.

(Dieser Beitrag wurde im November 2013 veröffentlicht, und am 27. Oktober 2019 aktualisiert.)

11 Kommentare zu “Diese CSS-Selektoren solltest Du kennen”

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!

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 😉

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.

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… 😉

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…

Schreibe einen Kommentar

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