Selektoren¶

Selektoren bieten die Möglichkeit ein oder mehrere Elemente auf der Website auszuwählen (selektieren) und diese mittels CSS zu verändern.

CSS-Selektoren sind das Herzstück von Cascading Style Sheets (CSS) und ermöglichen es, gezielt HTML-Elemente auszuwählen und zu gestalten. Mit Selektoren kannst man bestimmen, welche Elemente einer Webseite von einer bestimmten Stilregel betroffen sind – sei es ein einzelnes Element, eine Gruppe von Elementen oder sogar alle Elemente eines bestimmten Typs.

Grundlegende Selektoren¶

Universalselektor (*)¶

Wählt alle Elemente im Dokument aus.

<p>Ein Paragraph</p>
<p>Noch ein Paragraph</p>

* {
  color: red;
}

Setzt die Schriftfarbe aller Elemente auf rot.

Ein Paragraph

Noch ein Paragraph

Elementselektor (E)¶

Wählt alle Elemente des Typs E aus.

<h3>Eine Überschrift</h3>
<p>Ein Paragraph</p>
<p>Noch ein Paragraph</p>

p {
  color: blue;
}

Alle <p>-Elemente werden blau.

Eine Überschrift

Ein Paragraph

Noch ein Paragraph

Klassenselektor (.className)¶

Wählt alle Elemente mit der Klasse className aus.

<p class="text">Ein Paragraph</p>
<p>Noch ein Paragraph</p>

.text {
  background: blue;
}

Alle Elemente mit der Klasse text erhalten einen blauen Hintergrund.

Ein Paragraph

Noch ein Paragraph

ID-Selektor (#main)¶

Wählt das Element mit der ID main aus.

<p id="text">Ein Paragraph</p>
<p>Noch ein Paragraph</p>

#text {
  font-size: 30px;
}

Das Element mit der ID text erhält eine Schriftgröße von 20px.

Ein Paragraph

Noch ein Paragraph

Hierarchie- und Beziehungsselektoren¶

Nachfahrenselektor (E F)¶

Wählt alle Elemente F aus, die Nachfahren von E sind.

<div>
  <p>p in div</p>
</div>
<p>Nicht im div</p>

div p {
  color: red;
}

Alle <p>-Elemente innerhalb eines <div> werden rot.

p in div

Nicht im div

Kindselektor (E > F)¶

Wählt alle Elemente F aus, die direkte Kinder von E sind.

<div>
  <span>
    Span #1, in div.
    <span>Span #2, im span.</span>
  </span>
</div>
<span>Span #3, nicht im div.</span>

span {
  background-color: aqua;
}
div > span {
  background-color: yellow;
}

Alle <span>-Elemente, die direkte Kinder eines <div> sind, bekommen gelben Hintergrund.

Span #1, in div. Span #2, im span.

Span #3, nicht im div.

Adjacent-Sibling-Selektor (E + F)¶

Wählt das erste Element F aus, das direkt auf E folgt.

<h1>Überschrift</h1>
<p>p nach der h1</p>
<p>p nicht nach der h1</p>

h1 + p {
  color: red;
}

Der erste <p>-Absatz, der direkt auf ein <h1> folgt, wird rot.

Überschrift

p nach der h1

p nicht nach der h1

General-Sibling-Selektor (E ~ F)¶

Wählt alle Elemente F aus, die Geschwister von E sind und nach E kommen.

<h2>Überschrift</h2>
<p>p nach h2</p>
<p>p auch nach h2</p>
<div>
  <p>p nach div</p>
</div>

h2 ~ p {
  color: red;
}

Alle <p>-Elemente, die nach einem <h2> kommen, werden rot.

Überschrift

p nach h2

p auch nach h2

p nach div

Attributselektoren¶

Attributselektor ([a])¶

Wählt alle Elemente aus, die das Attribut a besitzen.

<a href="#">Link</a>

[href] {
  color: red;
}

Alle Elemente mit einem href-Attribut werden rot.

Link

Attribut-Gleichheitsselektor ([a=“b“])¶

Wählt alle Elemente aus, bei denen das Attribut a genau den Wert b hat.

<input type="text" name="vorname" id="vorname" />

[type="text"] {
  color: red;
}

Alle <input>-Elemente mit type="text" erhalten eine rote Schriftfarbe.

Attribut-Präfixselektor ([a^=“b“])¶

Wählt alle Elemente aus, bei denen das Attribut a mit dem Wert b beginnt.

<a href="https://css.philipperck.de">CSS</a>
<a href="selektoren.html">Selektoren</a>

[href^="https"] {
  color: green;
}

Alle Links, die mit https beginnen, werden grün.

CSS Selektoren

Attribut-Suffixselektor ([a$=“b“])¶

Wählt alle Elemente aus, bei denen das Attribut a mit dem Wert b endet.

<a href="download.pdf">PDF download</a>

[href$=".pdf"] {
  color: red;
}

Alle Links, die auf .pdf enden, werden rot.

PDF download

Attribut-Teilstringselektor ([a*=“b“])¶

Wählt alle Elemente aus, bei denen das Attribut a den Wert b irgendwo enthält.

<a href="mein-example.pdf">Beispiel</a>

[href*="example"] {
  font-weight: bold;
}

Alle Links, die example im href-Attribut enthalten, werden fett.

Beispiel

Pseudoklassen¶

:hover¶

Wählt ein Element aus, über dem sich der Mauszeiger befindet.

<button>Klicken</button>

button:hover {
  color: rebeccapurple;
}

Ein Button bekommt lila Schriftfarbe, wenn die Maus darüber schwebt.

:nth-child(n)¶

Wählt das n-te Kind eines Elternteils aus.

<ul>
  <li>Listitem 1</li>
  <li>Listitem 2</li>
  <li>Listitem 3</li>
</ul>

li:nth-child(2) {
  color: red;
}

Das zweite <li>-Element in einer Liste wird rot.

Listitem 1
Listitem 2
Listitem 3

:nth-last-child(n)¶

Wählt das n-te Kind eines Elternteils, gezählt von hinten.

<ul>
  <li>Listitem 1</li>
  <li>Listitem 2</li>
  <li>Listitem 3</li>
</ul

li:nth-last-child(3) {
  color: red;
}

Das erste <li>-Element in einer Liste wird rot.

Listitem 1
Listitem 2
Listitem 3

:nth-of-type(n)¶

Wählt das n-te Element eines bestimmten Typs aus.

<h2>Überschrift</h2>
<p>Paragraph</p>
<h3>Überschrift</h3>
<p>Paragraph</p>

p:nth-of-type(2) {
  color: red;
}

Der zweite <p>-Absatz wird rot.

Überschrift

Paragraph

Überschrift

Paragraph

:nth-last-of-type(n)¶

Wählt das n-te Element eines bestimmten Typs, gezählt von hinten.

<h2>Überschrift</h2>
<p>Paragraph</p>
<h3>Überschrift</h3>
<p>Paragraph</p>

p:nth-last-of-type(2) {
  color: red;
}

Der lerste <p>-Absatz wird rot.

Überschrift

Paragraph

Überschrift

Paragraph

:first-child¶

Wählt das erste Kind eines Elternteils aus.

<div>
  <p>Paragraph</p>
  <p>Paragraph</p>
</div>
<p>Paragraph</p>

div p:first-child {
  color: red;
}

Der erste <p>-Absatz in einem <div> wird rot.

Paragraph

:last-child¶

Wählt das letzte Kind eines Elternteils aus.

<div>
  <p>Paragraph</p>
  <p>Paragraph</p>
</div>
<p>Paragraph</p>

div p:last-child {
  color: red;
}

Der letzte <p>-Absatz in einem <div> wird rot.

Paragraph

:first-of-type¶

Wählt das erste Element eines bestimmten Typs aus.

<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>

p:first-of-type {
  color: red;
}

Der erste <p>-Absatz wird rot.

Paragraph

:last-of-type¶

Wählt das letzte Element eines bestimmten Typs aus.

<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>

p:last-of-type {
  color: red;
}

Der letzte <p>-Absatz wird rot.

Paragraph

:visited¶

Wählt besuchte Links aus.

<a href="#">Link</a>

a:visited {
  color: purple;
}

Besuchte Links werden lila.

Link

:active¶

Wählt ein Element aus, das gerade aktiviert wird (z. B. beim Klicken).

<a href="#">Link</a>

a:active {
  color: red;
}

Ein Link wird rot, während er geklickt wird.

Link

:focus¶

Wählt ein Element aus, das den Fokus hat (z. B. ein Eingabefeld).

<input type="text" name="nachname" id="nachname" />

input:focus {
  border: 4px solid blue;
}

Ein Eingabefeld erhält einen blauen Rahmen, wenn es fokussiert ist.

:enabled¶

Wählt aktivierte Formularelemente aus (z. B. Eingabefelder).

<input type="text" name="strasse" id="strasse" />
<input type="text" name="strasse2" id="strasse2" disabled />

input:enabled {
  background-color: crimson;
}

Aktivierte Eingabefelder erhalten die Hintergrundfarbe crimson.

:disabled¶

Wählt deaktivierte Formularelemente aus.

<input type="text" name="strasse" id="strasse" />
<input type="text" name="strasse2" id="strasse2" disabled />

input:disabled {
  background-color: gray;
}

Deaktivierte Eingabefelder erhalten einen grauen Hintergrund.

:checked¶

Wählt ausgewählte Formularelemente aus (z. B. Checkboxen oder Radiobuttons).

<p>Lieblingshelden:</p>
<input type="checkbox" id="ironman" name="helden" value="Ironman" />
<label for="ironman">Ironman</label>
<input type="checkbox" id="hulk" name="helden" value="Hulk" />
<label for="hulk">Hulk</label>
<input type="checkbox" id="thor" name="helden" value="Thor" />
<label for="thor">Thor</label>

input:checked + label {
  border: 2px solid green;
}

Labels von ausgewählten Checkboxen erhalten einen grünen Rahmen.

Lieblingshelden:

Ironman Hulk Thor