Čo sú to pseudo triedy v CSS?

Pseudo-triedy v CSS sú kľúčové slová, ktoré sa pridávajú k selektorom na označenie špeciálneho stavu prvku. Umožňujú aplikovať štýly na prvky na základe ich interakcie s používateľom, ich polohy v štruktúre dokumentu alebo iných vlastností, ktoré nie je možné vyjadriť štandardnými selektormi.

Príklady pseudo-tried:

• Stavy používateľa:

  • :hover - prvok, nad ktorým je kurzor myši.
  • :active - prvok, ktorý sa aktivuje (napríklad stlačené tlačidlo).
  • :focus - prvok, ktorý má fokus vstupu (napríklad textové pole).
  • :visited - odkaz, ktorý používateľ už navštívil.
  • :link - odkaz, ktorý používateľ ešte nenavštívil.

• Poloha v štruktúre:

  • :first-child - prvé dieťa rodiča.
  • :last-child - posledné dieťa rodiča.
  • :nth-child(n) - n-té dieťa.
  • :first-of-type - prvý prvok svojho typu medzi deťmi.
  • :last-of-type - posledný prvok svojho typu medzi deťmi.

• Iné:

  • :empty - prvok bez detí alebo textu.
  • :not(selector) - prvky, ktoré nevyhovujú zadanému selektoru.

Syntax:

selector:pseudo-class {
  property: value;
}

Príklad použitia:

/* Zmena farby textu pri prechode myšou nad odsek */
p:hover {
  color: blue;
}

/* Štýl pre prvý prvok zoznamu */
li:first-child {
  font-weight: bold;
}

Pseudo-triedy rozširujú možnosti selektorov, umožňujúc vytváranie dynamickejších a interaktívnejších rozhraní bez použitia JavaScriptu pre jednoduché zmeny štýlu.