Kleine CodeCrowd von programmieren lernen

CSS-Selektoren im Überblick

Wir haben uns in den letzten drei Wochen mit CSS-Selektoren befasst. In dieser Infografik fasse ich noch einmal alle CSS-Selektoren zusammen, sodass du ein übersichtliches Nachschlagewerk hast, um deine HTML-Elemente gezielt und sinnvoll über die CSS-Selektoren anzusprechen.

CSS Selektoren Cheatsheet

Selektor HTML CSS Erklärung
Element-Selektor <p></p> p {} Selektiert alle HTML-Elemente dieser Art. In diesem Beispiel alle p-Tags.
Klassen-Selektor <p class=„eine-klasse“></p> .eine-klasse {} Selektiert alle HTML-Elemente mit dieser Klasse.
Element-Klassen-Selektor <p class=„eine-klasse“></p> p.eine-klasse {} Selektiert alle p-Tags mit dieser Klasse. Andere HTML-Tags mit dieser Klasse bleiben von der Stilanweisung unberührt.
ID-Selektor <p id=„eine-id“></p> #eine-id {} Selektiert HTML-Tags mit dieser ID. Da eine ID immer einmalig sein muss, spricht dieser Selektor nur das eine HTML-Element mit dieser ID an. Logisch, oder?
Mehrere Selektoren <p></p>
<a class=“eine-klasse“></a>		 p,
a.eine-klasse {}		 Mehrere Selektoren werden durch ein Komma getrennt (und am besten in eine neue Zeile geschrieben). Egal um welche Art von Selektor es sich handelt.
Kombination von Selektoren <div class=“eine-klasse“>
<p></p>
</div>		 div.eine-klasse p {} Wenn du Selektoren kombinierst, wirkt die Stilanweisung nur, wenn sie diese Kombination von HTML-Elementen findet. In diesem Beispiel also nur dann, wenn ein p-Tag sich in einem div-Tag mit dieser Klasse befindet. Alle anderen p-Tags bleiben von dieser Regel ausgeschlossen.
Universeller Selektor Betrifft alle HTML-Elemente * {} Mit dem universellen Selektor sprichst du alle HTML-Elemente in diesem Dokument an. Dieser Selektor wird oft für ein CSS-Reset verwendet.
Universeller Selektor in einem Eltern-Element <div class=“eine-klasse“>
<p></p>
<a></a>
</div>		 div.eine-klasse * {} Mit dem universellen Selektor sprichst du alle HTML-Elemente in diesem Eltern-Element (in unserem Beispiel dem div-Tag mit der Beispiel-Klasse) an.
Kind-Selektor <div class=“eine-klasse“>
<p></p>
</div>
<p></p>		 div.eine-klasse > p {} Mit dem Kind-Selektor definierst du, welche Kind-Elemente eines Eltern-Elements du ansprechen willst. Alle Elemente dieses Typs, die nicht Kind des Eltern-Elements sind, bleiben von der Stilanweisung unberührt. In unserem Beispiel ist das eine p-Tag Kind-Element des div-Tags und wird angesprochen, während das andere p-Tag, welches eben kein Kind des Eltern-Divs ist, nicht angesprochen wird.
Kind-Selektor <div class=“eine-klasse“>
<p></p>
</div>
<p></p>		 div.eine-klasse > p {} Mit dem Kind-Selektor definierst du, welche Kind-Elemente eines Eltern-Elements du ansprechen willst. Alle Elemente dieses Typs, die nicht Kind des Eltern-Elements sind, bleiben von der Stilanweisung unberührt. In unserem Beispiel ist das eine p-Tag Kind-Element des div-Tags und wird angesprochen, während das andere p-Tag, welches eben kein Kind des Eltern-Divs ist, nicht angesprochen wird.
Folge-Selektor <div class=“eine-klasse“>
<p></p>
<p></p>
</div> 		div + p {} Mit dem Folge-Selektor sprichst du nur dieses eine HTML-Element an, welches direkt auf ein anderes HTML-Element folgt. Alle anderen bleiben unberührt. In unserem Beispiel, also nur das erste p-Tag, welches auf das div-Tag mit der Beispiel-Klasse folgt. Das zweite p-Tag folgt nicht direkt auf das div-Tag mit der Beispiel-Klasse und bleibt deshalb unberührt.
Kombinierter Folge-Selektor <div class=“eine-klasse“>
<p></p>
<a></a>
<a></a>
</div> 		div + p + a {} Mit dem kombinierten Folge-Selektor sprichst du nur dieses eine HTML-Element an, welches direkt auf ein anderes HTML-Element folgt, das wiederum auf ein anderes HTML-Element folgt. Alle anderen bleiben unberührt. In unserem Beispiel, also nur das a-Tag, welches auf das erste p-Tag folgt, welches wiederum auf das div-Tag mit der Beispiel-Klasse folgt. Das zweite a-Tag folgt nicht direkt auf das div-Tag und das p-Tag mit der Beispiel-Klasse und bleibt deshalb unberührt.
Universeller Folge-Selektor <div class=“eine-klasse“>
<p></p>
<p></p>
</div> 		div ~ p {} Mit dem universellen Folge-Selektor sprichst du alle spezifischen HTML-Elemente an, welches direkt auf ein anderes HTML-Element folgen. In unserem Beispiel also alle p-Tags, die auf das div-Tag mit der Beispiel-Klasse folgen.
Attribut-Selektor <a href=“https://code-crowd.de/“></a>
<a></a> 		[href] {} Mit dem Attribut-Selektor sprichst du alle HTML-Tags an, die dieses Attribut haben. Elemente ohne dieses Attribut bleiben von der Stilanweisung unberührt.
Element-Attribut-Selektor <a href=“https://code-crowd.de/“></a>
<a></a> 		a[href] {} Mit dem Element-Attribut-Selektor sprichst du alle HTML-Tags an, die dieses spezifische Tag sind (in unserem Beispiel ein a-Tag) und dieses Attribut (in unserem Beispiel ein href-Attribut) haben. Andere Elemente und dieselben Elemente ohne dieses Attribut bleiben von der Stilanweisung unberührt.
Attribut-Start-Selektor <a target=“_blank“></a>
<a></a> 		a[target^=“_“] {} Mit dem Attribut-Start-Selektor sprichst du alle HTML-Tags an, die in diesem spezifischen Attribut, den vorgegebenen Anfang haben. In unserem Beispiel das a-Tag mit dem Attribut target, denn der Attribut-Wert _blank starte mit einem _.
Attribut-Ende-Selektor <a target=“_blank“></a>
<a></a> 		a[target$=“k“] {} Mit dem Attribut-Ende-Selektor sprichst du alle HTML-Tags an, die in diesem spezifischen Attribut, das vorgegebene Ende haben. In unserem Beispiel das a-Tag mit dem Attribut target, denn der Attribut-Wert _blank endet mit einem k.
Attribut-Wildcard-Selektor <a target=“_blank“></a>
<a></a> 		a[target*=“ank“] {} Mit dem Attribut-Wildcard-Selektor sprichst du alle HTML-Tags an, die in diesem spezifischen Attribut, den vorgegebenen Teilwert haben. In unserem Beispiel das a-Tag mit dem Attribut target, denn der Attribut-Wert _blank hat den Teilwert ank.
Attribut-Start-Selektor <a target=“_blank“></a>
<a></a> 		a[target=“_blank“] {} Mit dem Attribut-Wert-Selektor sprichst du alle HTML-Tags an, die diese spezifische Kombination aus Tag, Attribut und Attribut-Wert haben. In unserem Beispiel das a-Tag mit dem Attribut target und dem Attribut-Wert _blank. Andere Elemente ohne diese Attribut-Wert-Kombination bleiben von der Stilanweisung unberührt.
Pseudo-Klassen-Selektor <a></a> a:hover {} Mit dem Pseudo-Klassen-Selektor sprichst du keine tatsächlichen HTML-Elemente an, sondern Zustände, die durch die Interaktion mit der Website entstehen. In unserem Beispiel das Hovern über einen Link.
Pseudo-Element-Selektor <a></a> a::before {} Mit dem Pseudo-Element-Selektor sprichst du keine tatsächlichen in HTML geschriebenen Elemente, sondern Pseudo-Elemente, die dadurch entstehen, dass du sie per CSS ansprichst. In unserem Beispiel fügen wir vor allen Links Inhalt ein.
:not Pseudo-Selektor <a></a>
<p></p>		 :not(p) {} Mit dem :not Pseudo-Selektor sprichst du alle Elemente an, die nicht das angegebene Element sind. In unserem Beispiel also das a-Tag, da es kein p-Tag ist.
Erstes-Kind-Selektor <p></p>
<p></p>		 p:first-child {} Mit dem Erstes-Kind-Selektor sprichst du das erste Elemente an, das Teil einer Reihe von Kind-Elementen ist. In unserem Beispiel also das erste p-Tag, da es sowohl ein p-Tag also auch das erste Element der Kind-Elemente ist.
Letztes-Kind-Selektor <p></p>
<p></p>		 p:last-child {} Mit dem Letztes-Kind-Selektor sprichst du das letzte Elemente an, das Teil einer Reihe von Kind-Elementen ist. In unserem Beispiel also das letzte p-Tag, da es sowohl ein p-Tag also auch das letzte Element der Kind-Elemente ist.
Einziges-Kind-Selektor <div>
<p></p>
</div>		 p:only-child {}
oder
div :only-child {}		 Mit dem Einziges-Kind-Selektor sprichst du ein HTML-Element an, dass das einzige Kind eines Eltern-Elements ist. Du kannst, wie in unserem Beispiel entweder das Kind-Element direkt benennen oder sein Eltern-Element, durch ein Leerzeichen getrennt, nennen, um dann das einzige Kind-Element anzusprechen.
Wiederholungs-Selektor :nth-child() <div>
<p></p>
<p></p>
</div>		 p:nth-child(2) {}
oder
p:nth-child(even) {}
oder
p:nth-child(odd) {}
oder
div :nth-child(odd) {} 		Mit dem Wiederholungs-Selektor :nth-child() sprichst du jedes so-und-so-vielte bzw. gerade oder ungerade HTML-Element an, dass das Kind eines Eltern-Elements ist. Du kannst, wie in unserem Beispiel entweder die Startzahl für den Wiederholungs-Selektor direkt benennen (wir haben 2 verwendet, daher greift der Style bei jedem zweiten Element) oder für jedes gerade oder ungerade Element das jeweils englische Wort even oder odd verwenden. Das letzte CSS-Beispiel zeigt, wie du den Wiederholungs-Selektor über das Eltern-Element verwendest. Weitere Details dazu hier.
Wiederholungs-Selektor :nth-last-child() <div>
<p></p>
<p></p>
</div>		 p:nth-last-child(2) {}
oder
p:nth-last-child(even) {}
oder
p:nth-last-child(odd) {}
oder
div :nth-last-child(odd) {} 		Mit dem umgekehrte Wiederholungs-Selektor :nth-last-child() sprichst du jedes letzte so-und-so-vielte bzw. gerade oder ungerade HTML-Element an, dass das Kind eines Eltern-Elements ist. Es wird also von hinten gezählt. Du kannst, wie in unserem Beispiel entweder die Startzahl für den Wiederholungs-Selektor direkt benennen (wir haben 2 verwendet, daher greift der Style bei jedem zweiten Element beginnend ab dem letzten) oder für jedes gerade oder ungerade Element das jeweils englische Wort even oder odd verwenden. Das letzte CSS-Beispiel zeigt, wie du den Wiederholungs-Selektor über das Eltern-Element verwendest.
Erster-Typ-Selektor <div>
<p></p>
<p></p>
</div>		 p:first-of-type {} Mit dem Erstes-Art-Selektor wählst du das erste Element dieser Art aus. In unserem Beispiel also das erste p-Tag.
Letzte-Typ-Selektor <div>
<p></p>
<p></p>
</div>		 p:last-of-type {} Mit dem Letzte-Art-Selektor wählst du das letzte Element dieser Art aus. In unserem Beispiel also das letzte p-Tag.
Einzige-Typ-Selektor <div>
<p></p>
<a></a>
<p></p>
</div>		 a:only-of-type {} Mit dem Einzige-Art-Selektor wählst du das einzige Element dieses Typs aus. In unserem Beispiel also das einzige a-Tag.
Wiederholungs-Typ-Selektor <div>
<p></p>
<p></p>
<p></p>
</div>		 :nth-of-type(3) {} Mit dem Wiederholungs-Typ-Selektor wählst du das Element dieses Typs aus, das in einer von dir festlegten Reihenfolge angesprochen wird. In unserem Beispiel also jedes dritte p-Tag. Die unterschiedlichen Arten der Verwendung kannst du den Beispielen der Wiederholungs-Selektoren entnehmen.

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.

Infobox

Kommentare