Опишите псевдокласове и псевдоелементе у CSS…

Pseudo-klase i pseudo-elementi proširuju mogućnosti selektora u CSS-u, omogućavajući primenu stilova na elemente na osnovu njihovog stanja, položaja ili drugih karakteristika koje ne mogu biti izražene jednostavnim selektorima.

Pseudo-klase

Pseudo-klase počinju sa jednim dvostrukim dvotačkom (:). Koriste se za stilizovanje elementa u određenom stanju.

Glavne pseudo-klase:

:hover - stilizuje element kada je mišem prebačen preko njega.
:active - stilizuje element tokom klika.
:focus - stilizuje element koji je trenutno u fokusu.
:visited - stilizuje posećeni link.
:link - stilizuje neposećeni link.
:first-child - stilizuje prvi dete element.
:last-child - stilizuje poslednje dete element.
:nth-child(n) - stilizuje n-ti dete element.
:nth-last-child(n) - stilizuje n-ti dete od kraja.
:not(selector) - stilizuje elemente koji ne odgovaraju datom selektoru.

/* Primer korišćenja pseudo-klasa */
a:hover {
  color: blue; // Promena boje linka pri prelaženju mišem
}

input:focus {
  border-color: green; // Promena boje okvira input polja pri fokusu
}

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

Pseudo-elementi

Pseudo-elementi počinju sa dvostrukim dvotačkom (::). Koriste se za stilizovanje određenog dela elementa ili za umetanje generisanog sadržaja pre ili posle sadržaja elementa.

Glavni pseudo-elementi:

::before - umetanje generisanog sadržaja pre sadržaja elementa. Često se koristi sa svojstvom content.
::after - umetanje generisanog sadržaja posle sadržaja elementa. Takođe zahteva svojstvo content.
::first-letter - stilizovanje prvog slova teksta.
::first-line - stilizovanje prvog reda teksta.
::selection - stilizovanje dela elementa koji je odabran.

/* Primer korišćenja pseudo-elementa */
p::first-letter {
  font-size: 2em; // Povećanje prvog slova paragrafa
  font-weight: bold;
}

h2::after {
  content: " ---"; // Dodavanje teksta nakon naslova
  color: gray;
}

mark::selection {
  background-color: yellow; // Promena pozadine odabranog teksta
  color: black;
}

Istorijski, pseudo-klase su koristile jedno dvotočka (:) radi kompatibilnosti sa CSS2.1, dok su pseudo-elementi u CSS3 počeli da koriste dvostruko dvotočko (::) radi bolje razlike. Preporučuje se korišćenje dvostrukog dvotočka za pseudo-elemente u savremenom kodu.

Tabela poređenja:

Karakteristika	Pseudo-klasa	Pseudo-element
Sintaksa	`:selector`	`::selector`
Svrha	Stanje elementa	Deo elementa ili generisani sadržaj

Опишите псевдокласове и псевдоелементе у CSS.