CSS Selektoren

Einfache Selektoren

.class
Klassen-Selektor, bezieht sich auf Elemente, welche das Attribut class="" besitzen, und die gleiche Bezeichnung wie nach dem Punkt im CSS.
#id
ID-Selektor, bezieht sich auf EIN Element, welches das Attribut id="" besitzt, und die gleiche Bezeichnung wie nach der Raute im CSS.
*
Universal-Selektor, bezieht sich auf ALLE Element.
element
Element-Selektor, bezieht sich auf alle HTML-Elemente mit diesem Namen, z.B. "p".

Beziehungen

selector, selector
Mit einem Komma können mehrere Selektoren zusammengefasst werden. Dies geht mit allen Selektoren, nicht nur mit Elementen.
selector selector
Bezieht sich auf Elemente, die in einem anderen enthalten sind (egal welche Ebene). Z.B. "div p", alle p die in einem div stehen.
selector > selector
Bezieht sich auf Elemente, die direkt in einem anderen enthalten sind (in der ersten Ebene). Z.B. "div > p", alle p die direkt in einem div stehen, ohne weitere Verschachtelungen.
selector + selector
Bezieht sich auf das Element, welches direkt in einem anderen enthalten ist (in der ersten Ebene), und nur auf das Erste.
selector ~ selector
Bezieht sich auf das Element, welches direkt nach dem ersten folgt (müssen auf der gleichen Ebene sein).

Attributs-Selektoren

[attribut]
Bezieht sich auf die Elemente, welche ein Attribut mit dem gleichen Namen wie in der eckigen Klammer haben. Z.B. [target] alle <a target="_blank">
[attribut=wert]
Bezieht sich auf die Elemente, welche das gleiche Attribut UND den gleichen Wert haben. <a attribut="wert">
[attribut~=wort]
Bezieht sich auf die Elemente, welche das gleiche Attribut UND ein gleiches Wort als Wert haben. <a attribut="wert wort">
[attribut|=zeichen]
Bezieht sich auf die Elemente, welche das gleiche Attribut UND ein der Wert mit den gleichen Zeichen anfängt. <a attribut="zeichen-satz">
[attribut^="zeichen"]
Bezieht sich auf die Elemente, welche das gleiche Attribut UND einen Wert mit den gleichen Zeichenanfang haben. <a attribut="zeichensatz">
[attribut$="zeichen"]
Bezieht sich auf die Elemente, welche das gleiche Attribut UND einen Wert mit den gleichen Zeichenende haben. <a attribut="datei.zeichen">
[attribut*="zeichen"]
Bezieht sich auf die Elemente, welche das gleiche Attribut UND einen Wert mit den gleichen Zeichen haben. <a attribut="vorzeichenNach">

Pseudo-Elemente

::after
Fügt einen Inhalt hinter dem gewählten Element hinzu.
::before
Fügt einen Inhalt vor dem gewählten Element hinzu.
::first-letter
Bezieht sich auf das erste Zeichen innerhalb des gewählten Elementes.
::first-line
Bezieht sich auf die erste Zeile innerhalb des gewählten Elementes.
::selection
Vom Benutzer markiert.

Pseudo-Klassen
Können an andere Selektoren angehangen werden.
... Links

:active
Wählt ein aktives Element (aktiver Link)
:hover
Wählt die Elemente, über welche die Maus schwebt. Nicht nur Links!
:visited
Wählt die Links, die schon besucht wurden.
:link
Wählt alle nicht besuchte Links.
:target
Wählt das Element mit den aktiven Anker. Nicht nur Links!

... Speziell

:empty
Wählt alle Elemente die keine Kinder haben (einschließlich Text).
:root
Wählt das Dokument root Element.
:not(selector)
Umkehrung der Auswahl von "selector".
:lang(zeichen)
Wählt alle Elemente mit dem Attribut "lang" und dem "zeichen" im Wert.

... Reihenfolgen

:first-child
Wählt ein Element, wenn es das erste Kindelement ist.
:nth-child(n)
Wählt ein Element, wenn es das n-te Kind ist. Es ist auch möglich statt n einer Zahl, "odd" und "even" anzugeben, für jedes gerade oder ungerade Element. Weiterhin kann auch mit "+x" bestimmt werden, ab welchen x-ten Element damit begonnen werden soll. Zum Beispiel "nth-child(3n+4)" bedeutet jedes Dritte, beginnend ab dem Vierten.
:nth-last-child(n)
Genauso wie ".nth-child(n)" nur das von hinten gezählt wird.
:last-child
Wählt ein Element, wenn es das letzte Kind ist.
:only-child
Wählt ein Element, wenn es das einzige Kind ist.
:first-of-type
Wählt ein Element, wenn es das erste Kindelement vom angegebenen Typ ist.
:nth-of-type(n)
Wählt ein Element, wenn es das n-te Kind vom angegebenen Typ ist. Es ist auch möglich statt n einer Zahl, "odd" und "even" anzugeben, für jedes gerade oder ungerade Element. Weiterhin kann auch mit "+x" bestimmt werden, ab welchen x-ten Element damit begonnen werden soll. Zum Beispiel "nth-child(3n+4)" bedeutet jedes Dritte, beginnend ab dem Vierten.
:nth-last-of-type(n)
Genauso wie ".nth-of-type(n)" nur das von hinten gezählt wird.
:last-of-type
Wählt ein Element, wenn es das letzte Kind vom angegebenen Typ ist.
:only-of-type
Wählt ein Element, wenn es das einzige Kind vom angegebenen Typ ist.

... Formularfelder

:focus
Wählt ein Element, welches gerade den Focus hat.
:checked
Wählt jedes Element, welches angekreuzt wurde (checked).
:disabled
Wählt jedes Element, welches "disabled" wurde.
:enabled
Wählt jedes Element, welches "enabled" wurde.
:in-range
Wählt jedes Element, innerhalb der Skala.
:valid
Wählt jedes Element, welches gültig ausgefüllt wurde.
:invalid
Wählt jedes Element mit ungültiger Eingabe.
:required
Wählt jedes Element, welches ausgefüllt werden muss.
:optional
Wählt jedes Element, welches nicht zwingend eine Eingabe benötigt.
:out-of-range
Wählt jedes Element, welches nicht innerhalb der Skala liegt.
:read-only
Wählt jedes Element, welche nur gelesen werden dürfen.
:read-write
Wählt jedes Element, welche nicht nur gelesen werden dürfen.