Popíšte pseudotriedy a pseudoelementy v CSS.

Pseudo-triedy a pseudo-prvky rozširujú možnosti selektorov v CSS, umožňujúc aplikovať štýly na prvky na základe ich stavu, polohy alebo iných charakteristík, ktoré nemôžu byť vyjadrené jednoduchými selektormi.

Pseudo-triedy

Pseudo-triedy začínajú jedným dvojbodkou (:). Používajú sa na štýlovanie prvku v určitom stave.

Hlavné pseudo-triedy:

• :hover - štýlovanie prvku pri najetí myšou.
• :active - štýlovanie prvku počas kliknutia.
• :focus - štýlovanie prvku, ktorý je práve vo fókus.
• :visited - štýlovanie navštíveného odkazu.
• :link - štýlovanie nenavštíveného odkazu.
• :first-child - štýlovanie prvého potomka.
• :last-child - štýlovanie posledného potomka.
• :nth-child(n) - štýlovanie n-tého potomka.
• :nth-last-child(n) - štýlovanie n-tého potomka od konca.
• :not(selector) - štýlovanie prvkov, ktoré nevyhovujú zadanému selektoru.

/* Príklad použitia pseudo-tried */
a:hover {
  color: blue; // Zmena farby odkazu pri najetí
}

input:focus {
  border-color: green; // Zmena farby rámčeka vstupného poľa pri fókus
}

li:first-child {
  font-weight: bold; // Štýlovanie prvého prvku zoznamu
}

Pseudo-prvky

Pseudo-prvky začínajú dvojitým dvojbodkou (::). Používajú sa na štýlovanie určitej časti prvku alebo na vkladanie generovaného obsahu pred alebo po obsahu prvku.

Hlavné pseudo-prvky:

• ::before - vkladá generovaný obsah pred obsah prvku. Často sa používa s vlastnosťou content.
• ::after - vkladá generovaný obsah po obsah prvku. Tiež vyžaduje vlastnosť content.
• ::first-letter - štýlovanie prvého písmena textového bloku.
• ::first-line - štýlovanie prvého riadku textového bloku.
• ::selection - štýlovanie časti prvku, ktorá je vybraná používateľom.

/* Príklad použitia pseudo-prvku */
p::first-letter {
  font-size: 2em; // Zvýšenie prvého písmena odstavca
  font-weight: bold;
}

h2::after {
  content: " ---"; // Pridanie textu za nadpis
  color: gray;
}

mark::selection {
  background-color: yellow; // Zmena pozadia vybratého textu
  color: black;
}

Historicky pseudo-triedy používali jedno dvojbodku (:) pre spätnú kompatibilitu s CSS2.1, zatiaľ čo pseudo-prvky v CSS3 začali používať dvojité dvojbodky (::) pre lepšie rozlíšenie. Odporúča sa používať dvojité dvojbodky pre pseudo-prvky v modernom kóde.

Porovnávacia tabuľka:

Charakteristika	Pseudo-trieda	Pseudo-prvok
Syntaxe	:selector	::selector
Účel	Stav prvku	Časť prvku alebo generovaný obsah