Was ist ein Selektor in CSS?

Der CSS-Selektor ist ein Muster, das festlegt, auf welche HTML-Elemente Stile angewendet werden. Er weist den Browser an, welche ein oder mehrere Elemente auswählen sollen.

Es gibt verschiedene Arten von Selektoren:

Element-Selektoren (Type selectors): Wählen alle Instanzen eines HTML-Elements aus.
```
p { /* Wählt alle Absätze aus */
  color: blue;
}
```

Klassen-Selektoren (Class selectors): Wählen Elemente mit einem bestimmten Wert im class-Attribut.

.highlight { /* Wählt alle Elemente mit der Klasse "highlight" */
  background-color: yellow;
}

ID-Selektoren (ID selectors): Wählen ein einzelnes Element mit einem bestimmten Wert im id-Attribut.
```
#header { /* Wählt das Element mit id "header" */
  font-size: 2em;
}
```

Universal-Selektor (Universal selector): Wählt alle Elemente aus.

* { /* Wählt alle Elemente auf der Seite aus */
  margin: 0;
  padding: 0;
}

Attribut-Selektoren (Attribute selectors): Wählen Elemente basierend auf der Anwesenheit oder dem Wert ihrer Attribute.
```
[type="text"] { /* Wählt alle input mit type="text" */
  border: 1px solid gray;
}
```

Pseudo-Klassen (Pseudo-classes): Wählen Elemente basierend auf ihrem Zustand.

a:hover { /* Wählt den Link beim Hover */
  text-decoration: underline;
}

Pseudo-Elemente (Pseudo-elements): Wählen bestimmte Teile eines Elements aus oder erstellen "fiktive" Elemente.
```
p::first-line { /* Wählt die erste Zeile des Absatzes */
  font-weight: bold;
}
```

Kombinatoren (Combinators): Bestimmen Beziehungen zwischen Selektoren.

Kombinator	Beschreibung	Beispiel
Leerzeichen ( )	Nachfahrenselektor (Descendant selector)	`div p`
`>`	Kindselektor (Child selector)	`div > p`
`+`	Geschwisterselektor (Adjacent sibling selector)	`h1 + p`
`~`	Allgemeiner Geschwisterselektor (General sibling selector)	`h1 ~ p`

Selektoren können kombiniert werden, um genauere Elemente zu definieren.