Frontend Development

# Pseudoklassen & Pseudoelemente

# Pseudoklassen

Eine Pseudoklasse kann in CSS speziell gestyled werden, z.B. wenn…

  • ein User mit der Maus über ein Element fährt
  • ein User ein Eingabefeld fokussiert

Die Syntax für Pseudoklassen ist…

selector:pseudo-class {
  property: value;
}

Manchmal siehst du eine Pseudoklasse auch mit zwei Doppelpunkten ::pseudo-class. Ein oder zwei Doppelpunkte werden vom Browser erkannt. Nachfolgend siehst du den Syntax mit einem Doppelpunkt :pseudo-class.

# :hover

:hover wird angewandt, wenn der User mit der Maus über ein Element fährt.

<a class="button" href="https://duckduckgo.com">Ich bin ein Button</a>

.button {
  padding: 0.5rem 1rem;
  color: white;
  background-color: royalblue;
  border-radius: 0.5rem;
}

.button:hover {
  background-color: orange;
}

Ergebnis

Ich bin ein Button

# :active

:active wird angewandt, wenn der User die Maustaste gedrückt hält über dem Element. So kann man beispielsweise den Eindruck erzeugen, dass etwas “eingedrückt” wird und einen Button haptisch erscheinen lassen.

  <a class="button" href="https://duckduckgo.com">Ich bin ein Button</a>

.button {
  padding: 0.5rem 1rem;
  color: white;
  background-color: royalblue;
  border-radius: 0.5rem;
}

.button:active {
  background-color: darkblue;
  box-shadow: inset 0 -2px 4px black;
}

Ergebnis

Ich bin ein Button

# :focus

:focus wird angewandt, wenn ein Element fokussiert ist. Meistens kennst du das von Eingabefeldern, bei denen du mit TAB zum nächsten Eingabefeld gehen kannst und es somit “fokussierst”.

<input class="inputfield" type="text" value="Fokussiere mich" />

.inputfield:focus {
  border: 4px solid tomato;
  color: royalblue;
}

Ergebnis

# :first-child

:first-child wird angewandt, wenn ein Element das erste Unterelement (“Child”) ist und erlaubt es, dieses anders zu stylen. In folgendem Beispiel ist li das erste Child von ul und erhält deswegen ein eigenes Styling.

<ul class="list">
  <li>Platz 1</li>
  <li>Platz 2</li>
  <li>Platz 3</li>
</ul>

li:first-child {
  color: tomato;
  font-weight: bold;
}

Ergebnis

  • Platz 1
  • Platz 2
  • Platz 3

# :last-child

:last-child wird angewandt, wenn eine Element das letzte Unterelement (“Child”) ist und erlaubt es, dieses anders zu stylen. In folgendem Beispiel ist das dritte li das letzte Child von ul und erhält deswegen ein eigenes Styling.

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

li:last-child {
  color: tomato;
  font-weight: bold;
}

Ergebnis

  • Platz 1
  • Platz 2
  • Platz 3

# :nth-child()

:nth-child() funktioniert ähnlich wie :first-child und :last-child. Der Unterschied ist, dass es erlaubt auch nur das zweite Child auszuwählen, oder sogar komplexe Regeln wie “style das erste und jedes zweite Child”.

<ul>
  <li>Platz 1</li>
  <li>Platz 2</li>
  <li>Platz 3</li>
  <li>Platz 4</li>
  <li>Platz 5</li>
</ul>

li:nth-child(2) {
  color: tomato;
  font-weight: bold;
}

li:nth-child(3) {
  color: orange;
  font-weight: bold;
}

Ergebnis

  • Platz 1
  • Platz 2
  • Platz 3
  • Platz 4
  • Platz 5

Zum vereinfachten Scannen von Listen ist es manchmal praktisch, wenn jede Zahl mit ungerader Zahl hervorgehoben wird.

li:nth-child(odd) { /* odd = ungerade, even = gerade */
  background-color: whitesmoke;
}

Ergebnis

  • Platz 1
  • Platz 2
  • Platz 3
  • Platz 4
  • Platz 5

Weiterführende Links

# Pseudoelemente

Pseudoelemente können benutzt werden, um per CSS eigene Elemente vor und nach einem Element zu erstellen. Warum das nützlich ist, erfährst du gleich.

Verschiedene Länder haben unterschiedliche Anführungszeichen. In Deutschland sind die Anführungszeichen „Text“ geläufig, während in der Schweiz «Text» gebraucht wird.

<blockquote class="schweiz">
  D’r schnäller isch d’r gschwinder.
</blockquote>

<blockquote class="deutschland">
  Wer zuerst kommt, mahlt zuerst.
</blockquote>


.schweiz:before {
  content: "«"; /* Das content-Attribute muss immer vorhanden sein, sonst wird :before oder :after nicht erkannt */
  color: tomato;
}

.schweiz:after {
  content: "»"; 
  color: tomato;
}

.deutschland:before {
  content: "„"; 
  color: tomato;
}

.deutschland:after {
  content: "“"; 
  color: tomato;
}

Ergebnis

D’r schnäller isch d’r gschwinder.
Wer zuerst kommt, mahlt zuerst.

Weiterführende Links

← Developer Tools →