Wat is een selector in CSS?

De CSS-selector is een patroon dat bepaalt op welke HTML-elementen stijlen worden toegepast. Het geeft de browser aan welke één of meerdere elementen geselecteerd moeten worden.

Er zijn verschillende soorten selectors:

Type selectors: Selecteren alle instanties van een HTML-element.
```
p { /* Selecteert alle paragrafen */
  color: blue;
}
```

Klasse selectors: Selecteren elementen met een specifieke waarde in het class attribuut.

.highlight { /* Selecteert alle elementen met de klasse "highlight" */
  background-color: yellow;
}

ID selectors: Selecteren een enkel element met een specifieke waarde in het id attribuut.
```
#header { /* Selecteert het element met id "header" */
  font-size: 2em;
}
```

Universele selector: Selecteert alle elementen.

* { /* Selecteert alle elementen op de pagina */
  margin: 0;
  padding: 0;
}

Attribuut selectors: Selecteren elementen op basis van de aanwezigheid of waarde van hun attributen.
```
[type="text"] { /* Selecteert alle input met type="text" */
  border: 1px solid gray;
}
```

Pseudo-klassen: Selecteren elementen op basis van hun toestand.

a:hover { /* Selecteert de link bij hover */
  text-decoration: underline;
}

Pseudo-elementen: Selecteren specifieke delen van een element of creëren "fictieve" elementen.

p::first-line { /* Selecteert de eerste regel van een paragraaf */
  font-weight: bold;
}

Combinators: Bepalen de relaties tussen selectors.

Combinator	Beschrijving	Voorbeeld
Spatie ( )	Afstammingsselector (Descendant selector)	`div p`
`>`	Kindselector (Child selector)	`div > p`
`+`	Aangrenzende sibling selector	`h1 + p`
`~`	Algemene sibling selector	`h1 ~ p`

Selectors kunnen worden gecombineerd voor een meer precieze definitie van elementen.