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.
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.
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 mithttpam Anfanga[href$=".pdf"]gestaltet alle Links auf PDF-Dateiena[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:
Der Selektor :first-child fügt die erste Rahmenlinie hinzu.
: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 oder Hintergrundbilder 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; }
;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.
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.
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.
Regex-Selektoren in CSS
Reguläre in CSS zu schreiben ist einfacher als Sie denken. Auch wenn Sie bisher noch keine regulären Ausdrücke verwendet haben, können Sie diese Art der Auswahl trotzdem problemlos beherrschen und lernen nebenher noch etwas Regex.
PDF-Dateien enden normalerweise mit „.pdf“, sofern sie nicht dynamisch generiert wurden. Mit dem folgendem CSS-Trick, können Sie jedem PDF-Link auf Ihrer Website ein PDF-Symbol hinzufügen.
Das Attribut, nach dem ich in diesem Fall suche, ist href und sein Wert endet mit „.pdf“.
a[href$='.pdf']{
/* apply icon */
}
In regulären Ausdrücken markiert „$“ das Ende eines Strings. In CSS haben wir es also verwendet, um zu sagen, dass wir nur alle Links formatieren möchten, die mit „.pdf“ enden.
Ein weiteres Zeichen für reguläre Ausdrücke, das sehr häufig verwendet wird, ist das Zeichen „^“. Es kennzeichnet den Anfang einer Zeichenfolge. Verwenden wir dieses Zeichen, um Links mit dem Protokoll „https“ zu formatieren.
a[href^='https']{
/*style*/
}
Was wäre, wenn Sie alle PHP-Links formatieren möchten? Sie überlegen wahrscheinlich, das „$“ zu verwenden, das ich Ihnen gezeigt habe, da dies das Ende eines Strings markiert und Sie es für Erweiterungen verwenden können. Denken Sie jedoch daran, dass PHP-Links möglicherweise Parameter enthalten, sodass sie möglicherweise nicht mit der Erweiterung enden. Wir müssen das Sternchen „*“ verwenden, das Sternchen wird verwendet, um irgendwo in der Zeichenfolge nach einer bestimmten Zeichenfolge zu suchen und nicht nur am Anfang oder Ende.
a[href*='.php']{
/* styles here */
}
Sie können Regex auf andere Arten von Tags anwenden, nicht nur auf Ankertags.
Bonuspunkte gibt’s für: Datei-Upload-Buttons stylen mit dem Pseudo-Element ::file-selector-button
Mit dem folgenden Code kannst Du nun auch (ab Chrome 89) die Select- bzw. Datei hochladen Buttons stylen:
input[type=file]::file-selector-button {
background: #4e9d46;
color: #fff;
padding: 0.5em;
}
input[type=file]::file-selector-button:hover {
background: #ee1d7a;
}
11 Antworten
Ein exzellentes Hilfsmittel zum Durchtesten der nth-Pseudo-Selektoren (:nth-child, :nth-of-type, usw), hat CSS-Tricks gebaut: http://css-tricks.com/examples/nth-child-tester/
cu, w0lf.
Danke für deinen informativen Beitrag, danke an Peter Müller für den Hinweis!
Grüße
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… 😉
Danke fürs nochmalerinnern und die hintergrudninfos!
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.
Danke für das Kompliment und den Hinweis. „backgroudn“ ist eine neue CSS-Eigenschaft mit der man den „Hintergrudn“ gestalten kann. Ich denke, dass wir den Tippfehler demnächstens mal fixen werden.
Echt genial vorallem mit dem NTH-CHILD() … dankeschön 🙂 ruhig mehr davon posten
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!
Kommentare sind geschlossen.