Welke CSS-selectors ken je?

• Universele selector (*) - selecteert alle elementen.
• Type selector (element) - selecteert elementen van een specifiek type.
• Klasse selector (.klasse) - selecteert elementen met een specifieke klasse.
• ID selector (#id) - selecteert een element met een specifieke identificatie.
• Attribuut selector ([attribuut], [attribuut="waarde"], [attribuut~="waarde"], [attribuut|="waarde"], [attribuut^="waarde"], [attribuut$="waarde"], [attribuut*="waarde"]) - selecteert elementen op basis van de aanwezigheid of waarde van een attribuut.
• Pseudo-klassen (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(selector)) - selecteert elementen in een bepaalde staat of positie.
• Pseudo-elementen (::before, ::after, ::first-line, ::first-letter, ::selection) - selecteert delen van een element.
• Combinatoren:
  • Descendant selector (selector selector) - selecteert de descendanten van de eerste selector.
  • Direct kind selector (selector > selector) - selecteert de directe kinderen van de eerste selector.
  • Adjacent sibling selector (selector + selector) - selecteert het element dat direct volgt op de eerste selector.
  • Algemene sibling selector (selector ~ selector) - selecteert alle broers (volgende) van de eerste selector.

Voorbeelden:

/* Universele selector */
* {
  margin: 0;
  padding: 0;
}

/* Type selector */
p {
  line-height: 1.5;
}

/* Klasse selector */
.highlight {
  color: yellow;
}

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

/* Attribuut selector */
[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;
}

/* Combinatoren */
div p {
  margin-bottom: 10px; /* Paragrafen binnen div */
}
ul > li {
  list-style: none; /* Directe kinderen van li binnen ul */
}
h2 + p {
  margin-top: 5px; /* Paragraaf die direct volgt op h2 */
}
h3 ~ p {
  color: gray; /* Alle paragrafen na h3 */
}