Welche CSS-Selektoren kennen Sie?

• Universeller Selektor (*) - wählt alle Elemente aus.
• Typ-Selektor (Element) - wählt Elemente eines bestimmten Typs aus.
• Klassen-Selektor (.Klasse) - wählt Elemente mit einer bestimmten Klasse aus.
• ID-Selektor (#id) - wählt ein Element mit einer bestimmten ID aus.
• Attribut-Selektor ([Attribut], [Attribut="Wert"], [Attribut~="Wert"], [Attribut|="Wert"], [Attribut^="Wert"], [Attribut$="Wert"], [Attribut*="Wert"]) - wählt Elemente basierend auf der Anwesenheit oder dem Wert eines Attributs aus.
• Pseudo-Klassen (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(Selektor)) - wählen Elemente in einem bestimmten Zustand oder an einer bestimmten Position aus.
• Pseudo-Elemente (::before, ::after, ::first-line, ::first-letter, ::selection) - wählen Teile eines Elements aus.
• Kombinatoren:
  • Nachfahrenselektor (Selektor Selektor) - wählt Nachfahren des ersten Selektors aus.
  • Direkter Kind-Selektor (Selektor > Selektor) - wählt direkte Kinder des ersten Selektors aus.
  • Adjacent-Sibling-Selektor (Selektor + Selektor) - wählt das unmittelbar folgende Geschwisterelement des ersten Selektors aus.
  • Allgemeiner Geschwister-Selektor (Selektor ~ Selektor) - wählt alle Geschwister des ersten Selektors aus.

Beispiele:

/* Universeller Selektor */
* {
  margin: 0;
  padding: 0;
}

/* Typ-Selektor */
p {
  line-height: 1.5;
}

/* Klassen-Selektor */
.highlight {
  color: yellow;
}

/* ID-Selektor */
#main-header {
  font-size: 2em;
}

/* Attribut-Selektor */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

/* Pseudo-Klasse */
a:hover {
  text-decoration: underline;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Pseudo-Element */
p::first-letter {
  font-weight: bold;
}

/* Kombinatoren */
div p {
  margin-bottom: 10px; /* Absätze innerhalb von div */
}
ul > li {
  list-style: none; /* Direkte Nachkommen von li innerhalb von ul */
}
h2 + p {
  margin-top: 5px; /* Absatz, der direkt nach h2 folgt */
}
h3 ~ p {
  color: gray; /* Alle Absätze nach h3 */
}