Šta su pseudoklase u CSS-u?

Pseudo-klase u CSS-u su ključne reči koje se dodaju selektorima da označe poseban status elementa. Omogućavaju primenu stilova na elemente na osnovu njihove interakcije sa korisnikom, položaja u strukturi dokumenta ili drugih karakteristika koje se ne mogu izraziti standardnim selektorima.

Primeri pseudo-klasa:

• Stanja korisnika:

  • :hover - element na koji je prebačen kursor miša.
  • :active - element koji se aktivira (npr. pritisnuto dugme miša).
  • :focus - element koji je u fokusu unosa (npr. tekstualno polje).
  • :visited - link koji je korisnik već posetio.
  • :link - link koji korisnik još nije posetio.

• Položaj u strukturi:

  • :first-child - prvi dete svog roditelja.
  • :last-child - poslednje dete svog roditelja.
  • :nth-child(n) - n-to dete svog roditelja.
  • :first-of-type - prvi element svog tipa među decom.
  • :last-of-type - poslednji element svog tipa među decom.

• Ostalo:

  • :empty - element bez dece ili teksta.
  • :not(selector) - elementi koji ne odgovaraju navedenom selektoru.

Sintaksa:

selector:pseudo-class {
  property: value;
}

Primer upotrebe:

/* Promena boje teksta pri prelasku miša preko paragrafa */
p:hover {
  color: blue;
}

/* Stil za prvi element liste */
li:first-child {
  font-weight: bold;
}

Pseudo-klase proširuju mogućnosti selektora, omogućavajući kreiranje dinamičnijih i interaktivnijih interfejsa bez korišćenja JavaScript-a za jednostavne promene stila.