CSS-Selektoren, aber so richtig: Die 10 besten Selektoren um den Quellcode aufzuräumen
„Viele Wege führen nach Rom.“ – Diesen Spruch hat sicherlich jeder schon einmal gehört. Nur leider ist nicht jeder Weg, der nach Rom führt, der Beste. So ist es auch mit CSS. Mit den richtigen CSS-Selektoren könnt ihr aber auch schnell den richtigen Weg finden und euren Quellcode sauber, flexibel und aufgeräumt halten.
Das CSS-Problem: Wenn Quellcode unübersichtlich wird
Benutzen wir ausschließlich nur die Selektierung über ID und Klassen, kann das Selektieren von dem ersten Element, dem letzten Element oder jedem zweiten Element den Quellcode verunstalten.
Beispiel: Falsch
Der HTML-Quellcode ist sehr unübersichtlich und schlecht zu verstehen. Zudem ist die Struktur nicht dynamisch und erfordert immer wieder die Adressierungen mit den Klassen.
<ul class="list">
<li class="startElement">Lorem ipsum</li>
<li class="boldElement">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li class="boldElement">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li class="boldElement">Lorem ipsum</li>
<li class="endElement">Lorem ipsum</li>
</ul>
.list li.startElement {
color: #f00;
}
.list li.boldElement {
font-weight:bold;
}
.list li.endElement {
color: #f00;
}
Beispiel: Richtig
Bei dieser Variante wird immer das erste Element und das letzte Element ausgewählt. Zudem wird automatisch über die Pseudoklasse :nth-child(2n) immer das zweite Element innerhalb der Liste ausgewählt und formatiert. Dies macht den CSS-Code nicht nur dynamisch und sauber, sondern sorgt auch für einen einwandfreien HTML-Quellcode.
<ul class="list">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
.list li:first-child {
color: #f00;
}
.list li:nth-child(2n) {
font-weight: bold;
}
.list li:last-child {
color: #f00;
}
Mit diesem kleinen Beispiel können wir nachvollziehen, welche Auswirkungen gute CSS-Selektoren auf ein gesamtes Projekt haben können. Nicht nur die CSS-Dateien sind übersichtlich und dynamisch, sondern auch die HTML-Datei ist nicht überfüllt mit unzähligen Klassen und IDs. Besonders bei großen Projekten ist es wichtig, den Überblick zu bewahren. Zu viele Klassen und IDs können schnell vertauscht werden und lähmen unsere Webseite.
Die CSS-Selektoren: Das sind unsere Top 10
1. Jedes n. Kind-Element auswählen
table tr:nth-child(2n) {
background-color: #999;
}
Jedes zweite Kind-Element wird ausgewählt und formatiert. In diesem Beispiel wird somit immer das zweite tr grau hinterlegt.
2. Leere Elemente verstecken
p:empty {
display:none;
}
Mit :empty werden alle Elemente selektiert, die keinen Inhalt besitzen. Dies ist praktisch um ggf. leere Elemente einfach auszublenden – hier alle leeren p-Tags.
3. HTTPS Links formatieren
a[href^="https://"] {
color: #0f0;
}
Über den Attribut-Selektor können Elemente mit einem bestimmen Attribut beziehungsweise Inhalt selektiert werden. Mit einem bevorstehenden ^ brauch nur der Anfang übereinstimmen. In unserem Fall überprüfen wir, ob der Link ein HTTPS-Link ist und wollen diesen in der Farbe grün formatieren.
4. Dateiformat überprüfen
a[href$=".pdf"] {
background-color: #fff;
}
Der Attribut-Selektor kann aber auch nur den hinteren Teil eines Attributes überprüfen. Dies funktioniert mit einem bevorstehenden $. Unser CSS-Code überprüft, ob der Link auf eine PDF-Datei verweist und formatiert den Link mit einem weißen Hintergrund. Natürlich könnte man hier auch beispielsweise ein PDF-Icon als Hintergrundbild definieren.
5. Vollständigen Inhalt eines Attributes überprüfen
div[class*="left"] {
float: left;
}
Wissen wir nicht, ob sich unser gesuchtes Keyword vorne oder hinten versteckt, können wir auch mit einem bevorstehenden * den vollständigen Inhalt prüfen. Es ist egal ob sich left in der Klasse vorne, hinten oder in der Mitte befindet.
6. Negationen mit not()
:not(p) {
color: #fff;
}
Sollen alle Elemente – bis auf p-Tags – ausgewählt werden? Kein Problem mit der Negationen :not(). In unserem Beispiel werden alle DOM-Elemente ausgewählt, die kein p-Tag sind und mit der Schriftfarbe weiß formatiert.
7. Aktive Checkbox oder Radiobox hervorheben
input:checked {
border: 1px solid;
}
Aktive Checkboxen oder Radioboxen werden mit einem Rand dargestellt. Werden diese abgewählt, verschwindet der Rahmen automatisch. Folgend gibt es auch noch die Pseudoklassen :enabled und :disabled, die deaktivierte oder aktivierte Elemente selektiert.
8. Geschwister-Elemente selektieren
p ~ ul {
background-color: #f00;
}
Geschwister-Elemente sind Elemente, die das gleiche Eltern-Element besitzen und somit sich auf einer Ebene befinden. Mit unserem Selektor werden alle Listen-Elemente selektiert, die sich nach dem p-Tag befinden und das gleiche Eltern-Element besitzen. Elemente die das gleiche Eltern-Element besitzen, jedoch vor dem p-Tag stehen, werden nicht selektiert und erhalten keinen roten Hintergrund.
9. Erstes Zeichen formatieren
p:first-letter {
text-transform: uppercase;
font-weight: bold;
font-size: 28px;
}
Mit :first-letter können wir das erste Zeichnen eines Elementes formatieren. Wir nutzen dies um den ersten Buchstaben von unserem p-Tag uppercase, bold und in 28px darzustellen.
10. Erstes oder letztes Element von einem Typ
article:first-of-type,
article:last-of-type {
margin: 10px 0;
}
Möchten wir von unserem Dokument das insgesamt erste oder letzte Element von einem Typ selektieren, können wir dafür die Pseudoklasse :first-of-type oder :last-of-type benutzen. In unserem Beispiel erhält das letzte und erste article-Element einen Abstand von 10px nach unten und oben.
Die richtigen CSS-Selektoren immer zur Hand!
Es gibt noch weitaus mehr praktische CSS-Selektoren, die euch bei eurer täglichen Arbeit helfen können. Nicht immer sind alle interessant und es muss abgewägt werden, welche wirklich Sinn ergeben. Wenn wir aber erstmal den Dreh raus haben und mit den neuen CSS-Selektoren vertraut sind, wollen wir diese auch nicht mehr missen. Egal ob kleine oder große Projekte, es ist immer sinnvoll effizient und produktiv zu arbeiten.
Welche neuen CSS-Selektoren benutzt ihr regelmäßig?
Gute Beispiele, oftmals sehr simpel – aber manchmal kommt man einfach selber nicht drauf ;) Das Beispiel mit den leeren p Elementen löst ein so simples Problem, welches ich schon des öfteren hatte. Vielen Dank
Punkt 8 ist nicht ganz richtig. ~ selektiert nur nachfolgende Elemente auf der im selben Elternelement. Ich hab hier mal ein simples Beispiel erstellt: https://jsfiddle.net/alinnert/nLnzo8h8/
Da hast du natürlich vollkommen recht Andreas. Habe den Satz korrigiert. Danke dir!
2. Gefährlich, da Elemente ohne Inhalt aber mit Whitespaces oder Umbruch nicht empty sind aus CSS-Sicht.
6. Sehr nützlich, kann aber auch unertwartete Resultate bringen, da sich die Spezifität erhöht, wenn man im :not Selektor eine Klasse oder ID verwendet.
8. Selektiert nur nachfolgende Geschwister auf der Ebene
10. Funktioniert anders als man zuerst denkt. Selektiert nach Elementtypen nicht Klassen
Hier fehlen ein paar nützliche Tricks, wie li + li für alle außer first-child oder li:not(:first-child) für selbiges.
Neu sind die Selektoren nicht, gut zur Auffrischung allemal. Wer jedoch „ausschließlich nur die Selektierung über ID und Klasse“ benutzt, wie anfangs erwähnt, sollte allerdings andere damit arbeiten lassen.
Punkt 10 ist ebenfalls nicht ganz richtig – das bezieht sich auf das erste/letzte Element vom Eltern-Element, nicht vom Dokument.
https://jsfiddle.net/y2a21142/
Punkt 5 bitte durch ein besseres Beispiel ersetzen! Da wird versucht, den Klassenselektor
.leftnachzubauen, allerdings würde z.B. auch die KlassesomethingLeftBehindselektiert.Ich werde nie CSS beherrschen… Ich glaube ich sollte bei der Desktopentwicklung bleiben… ^^