Anzeige
Anzeige
Listicle
Artikel merken

CSS-Selektoren, aber so richtig: Die 10 besten Selektoren um den Quellcode aufzuräumen

Nicht nur HTML5 hat viele neue Funktion erhalten um Webseiten, strukturell und funktional, aufzumotzen. Auch bei den Cascading Style Sheets (CSS) hat sich sehr viel getan. Viele neue CSS-Selektoren werden aber noch kaum oder wenig benutzt, da es auch weiterhin mit ID und Klasse umständlich funktioniert. Wir werfen jetzt einen Blick auf die neuen dynamischen Selektoren von CSS3.

Von Jonathan Schneider
4 Min. Lesezeit
Anzeige
Anzeige
Mit den richtigen CSS-Selektoren Zeit sparen. (Bild: Shutterstock)

„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

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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()

Anzeige
Anzeige

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

Anzeige
Anzeige

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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
8 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

André

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

Antworten
Andreas Linnert

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/

Antworten
Jonathan Schneider

Da hast du natürlich vollkommen recht Andreas. Habe den Satz korrigiert. Danke dir!

Antworten
dfgdfgdfrtgtrgrt

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.

Antworten
Robert

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.

Antworten
Oliver

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/

Antworten
Felix

Punkt 5 bitte durch ein besseres Beispiel ersetzen! Da wird versucht, den Klassenselektor .left nachzubauen, allerdings würde z.B. auch die Klasse somethingLeftBehind selektiert.

Antworten
CloudMaker97

Ich werde nie CSS beherrschen… Ich glaube ich sollte bei der Desktopentwicklung bleiben… ^^

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige