CSS & Styling

Wat zijn CSS pseudo-classes (:hover, :focus, :nth-child)?

Pseudo-classes selecteren elementen in specifieke staten.

Home/Categorieën/CSS & Styling/Wat zijn CSS pseudo-classes (:hover, :focus, :nth-child)?

Veelgebruikte pseudo-classes

:hover - over element hoveren :focus - element geselecteerd (keyboard) :active - element aan het klikken :visited - link al bezocht :nth-child(n) - nth element :first-child, :last-child :disabled - disabled input :checked - checked checkbox/radio

Code Voorbeelden

CSSPseudo-class voorbeelden
a:hover {
  color: red;
  text-decoration: underline;
}

input:focus {
  outline: 2px solid blue;
  box-shadow: 0 0 5px blue;
}

li:nth-child(2n) {
  background: lightyellow;  /* Alternating rows */
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.list li:first-child {
  font-weight: bold;
}

.list li:last-child {
  margin-bottom: 0;
}

Relevante trefwoorden

pseudo-class:hover:focus:nth-child
← Terug naar CSS & StylingAlle categorieën →