CSS-Selektor-Referenzhandbuch

CSS-Selektoren

CSS-Selektoren werden zum "Finden" (oder Auswählen) der HTML-Elemente verwendet, die Sie stylen möchten.

Verwenden Sie unseren CSS-Selektor-Tester, um verschiedene Selektoren zu demonstrieren.

CSS-einfache Selektoren

Einfache Selektoren wählen Elemente basierend auf dem Elementnamen, dem id und der Klasse aus. Außerdem gibt es den universellen Selektor (*)

Selektor Beispiel Beispielbeschreibung
element p Wählen Sie alle <p>-Elemente aus.
#id #firstname Wählen Sie das Element mit id="firstname" aus.
* * Wählen Sie alle Elemente aus.
.class .intro Wählen Sie alle Elemente aus, die class="intro" haben.

CSS-Attributselektoren

Attributselektoren wählen HTML-Elemente mit einem bestimmten Attributset aus.

Selektor Beispiel Beispielbeschreibung
[attribute] [target] Wählen Sie alle Elemente aus, die das Attribut target haben.
[attribute=value] [target=_blank] Wählen Sie alle Elemente aus, die das Attribut target="_blank" haben.
[attribute~=value] [title~=flower] Wählen Sie alle Elemente aus, deren title-Attribut den Begriff "flower" enthält.
[attribute|=value] [lang|=en] Wählen Sie alle Elemente aus, deren lang-Attributwert mit "en" beginnt.
[attribute^=value] a[href^="https"] Wählen Sie alle <a>-Elemente aus, deren src-Attributwert mit "https" beginnt.
[attribute$=value] a[href$=".pdf"] Wählen Sie alle <a>-Elemente aus, deren src-Attribut mit ".pdf" endet.
[attribute*=value] a[href*="codew3c"] Wählen Sie jeden <a>-Element aus, dessen href-Attributwert den Unterstring "abc" enthält.

CSS eingebettete Selektoren

Selektor Beispiel Beispielbeschreibung
& & Stilangewendung für ein Element im Kontext eines anderen Elements