CSS-Selektoren

In CSS können die HTML-Tags, Klassen und IDs angewählt werden, um sie zu formatieren.
Die Spalte "CSS" zeigt an, in welcher Version (CSS1, CSS2, CSS3) die CSS-Eigenschaften definiert wurden.

Grundlagen

Selektor Beispiel Beschreibung CSS
.class .intro {…} Wählt alle Elemente mit der Klasse "intro" 1
#id #firstname {…} Wählt das Element mit der ID "firstname" (id="firstname") 1
* * {…} Wählt alle Elemente 2
Element p {…} Wählt alle <p>-Elemente 1
Element, Element div,p {…} Wählt alle <div>-Elemente und alle <p>-Elemente 1
Element Element div p {…} Wählt alle <p>-Elemente innerhalb von <div>-Elementen 1
Element>Element div>p {…} Wählt alle <p>-Elemente, deren Eltern ein <div>-Element sind 2
:link a:link {…} Wählt alle unbesuchten Links 1
:visited a:visited {…} Wählt alle besuchten Links 1
:active a:active {…} Wählt den aktiven Link 1
:hover a:hover {…} Wählt den Link an, der mit der Maus überfahren wird (mouseover) 1

Erweitert

Selektor Beispiel Beschreibung CSS
Element+Element div+p {…} Wählt alle <p>-Elemente, die direkt nach einem <div>-Elemente kommen 2
[attribute] [target] {…} Wählt alle Elemente mit einem target-Attribut 2
[attribute=value] [target=_blank] {…} Wählt alle Elemente mit dem Ziel "neuer Tab" (target="_blank") 2
[attribute~=value] [title~=flower] {…} Wählt alle Elemente, deren title-Attribut das Wort "flower" beinhaltet 2
[attribute|=value] [lang|=en] {…} Wählt alle Elemente mit dem Sprachattribut, das mit "en" beginnt 2
:focus input:focus {…} Wählt das Eingabefeld, das im Fokus steht 2
:first-letter p:first-letter {…} Wählt den ersten Buchstaben jedes <p>-Elements 1
:first-line p:first-line {…} Wählt die erste Zeile jedes <p>-Elements 1
:first-child p:first-child {…} Wählt jedes <p>-Element, das das erste Kind eines Elternelements ist 2
:before p:before {…} Inhalt vor dem Inhalt eines <p>-Elements einfügen 2
:after p:after {…} Inhalt nach dem Inhalt eines <p>-Elements einfügen 2
:lang(language) p:lang(it) {…} Wählt jedes <p>-Element mit dem Sprachattribut "it" (Italian) 2
Element1~Element2 p~ul {…} Wählt jedes <ul>-Element, dessen vorhergehendes Element ein <p>-Element ist 3
[attribute^=value] a[src^="https"] {…} Wählt jedes <a>-Element, dessen src-Attributwert mit "https" beginnt 3
[attribute$=value] a[src$=".pdf"] {…} Wählt jedes <a>-Element, dessen src-Attributwert mit ".pdf" beginnt 3
[attribute*=value] a[src*="w3schools"] {…} Wählt jedes <a>-Element, dessen src-Attributwert die Zeichenfolge "w3schools" beinhaltet 3
:first-of-type p:first-of-type {…} Wählt jedes <p>-Element, welches das erste <p>-Kind seines Elternelements ist 3
:last-of-type p:last-of-type {…} Wählt jedes <p>-Element, welches das letzte <p>-Kind seines Elternelements ist 3
:only-of-type p:only-of-type {…} Wählt jedes <p>-Element, welches das einzige <p>-Element seines Elternelements ist 3
:only-child p:only-child {…} Wählt jedes <p>-Element, welches das einzige Kind seiner Eltern ist 3
:nth-child(n) p:nth-child(2) {…} Wählt jedes <p>-Element, welches das zweite Kind seiner Eltern ist 3
:nth-last-child(n) p:nth-last-child(2) {…} Wählt jedes <p>-Element, welches das zweite Kind seiner Eltern ist, gezählt vom letzten Kind 3
:nth-of-type(n) p:nth-of-type(2) Wählt jedes <p>-Element, welches das zweite <p>-Kind seines Elternelements ist 3
:nth-last-of-type(n) p:nth-last-of-type(2) Wählt jedes <p>-Element, welches das zweite <p>-Kind seines Elternelements ist, gezählt vom letzten Kind 3
:last-child p:last-child Wählt jedes <p>-Element, welches das letzte <p>-Kind seiner Eltern ist 3
:root :root Wählt das Wurzelelement (ist immer das <html> 3
:empty p:empty Wählt jedes <p>-Element, das keine Kinder hat 3
:target #news:target Wählt das momentan aktive #news-Element (URL, die diesen Ankernamen beinhaltet) 3
:enabled input:enabled Wählt jedes aktive <input>-Element (Eingabefeld) 3
:disabled input:disabled Wählt jedes inaktive <input>-Element (Eingabefeld) 3
:checked input:checked Wählt jedes ausgewählte <input>-Element (Eingabefeld) 3
:not(selector) :not(p) Wählt jedes Element, das kein <p>-Element ist 3
::selection ::selection Wählt den vom Benutzer markierten Text an (z.B. Hintergrundfarbe von markiertem Text ändern) 3