Popište pseudotřídy a pseudoelementy v CSS.

Pseudo-třídy a pseudo-prvky rozšiřují možnosti selektorů v CSS, umožňují aplikovat styly na prvky na základě jejich stavu, polohy nebo jiných vlastností, které nelze vyjádřit jednoduchými selektory.

Pseudo-třídy

Pseudo-třídy začínají jedním dvojtečkem (:). Používají se k stylování prvku v určitém stavu.

Hlavní pseudo-třídy:

• :hover - stylování prvku při najetí myší.
• :active - stylování prvku při kliknutí (aktivaci).
• :focus - stylování prvku, který je právě ve fokusu (například po přechodu odkazem nebo kliknutí na vstupní pole).
• :visited - stylování navštíveného odkazu.
• :link - stylování nenavštíveného odkazu.
• :first-child - stylování prvního potomka svého rodiče.
• :last-child - stylování posledního potomka svého rodiče.
• :nth-child(n) - stylování n-tého potomka svého rodiče. n může být číslo, klíčové slovo (even, odd) nebo výraz (2n+1).
• :nth-last-child(n) - stylování n-tého potomka od konce.
• :not(selector) - stylování prvků, které neodpovídají zadanému selektoru.

/* Příklad použití pseudo-tříd */
a:hover {
  color: blue; // Změna barvy odkazu při najetí
}

input:focus {
  border-color: green; // Změna barvy rámečku vstupního pole při fokusu
}

li:first-child {
  font-weight: bold; // Stylování prvního prvku seznamu
}

Pseudo-prvky

Pseudo-prvky začínají dvěma dvojtečkami (::). Používají se k stylování určité části prvku nebo k vkládání generovaného obsahu před nebo po obsahu prvku.

Hlavní pseudo-prvky:

• ::before - vkládá generovaný obsah před obsah prvku. Často se používá s vlastností content.
• ::after - vkládá generovaný obsah po obsah prvku. Také vyžaduje vlastnost content.
• ::first-letter - stylování prvního písmene textového bloku.
• ::first-line - stylování první řádky textového bloku.
• ::selection - stylování části prvku, která je vybrána uživatelem.

/* Příklad použití pseudo-prvků */
p::first-letter {
  font-size: 2em; // Zvětšení prvního písmena odstavce
  font-weight: bold;
}

h2::after {
  content: " ---"; // Přidání textu za nadpis
  color: gray;
}

mark::selection {
  background-color: yellow; // Změna pozadí vybraného textu
  color: black;
}

Historicky pseudo-třídy používaly jedinou dvojtečku (:``) pro zpětnou kompatibilitu s CSS2.1, zatímco pseudo-prvky v CSS3 začaly používat dvojité dvojtečky (::`) pro lepší rozlišení. Doporučuje se používat dvojité dvojtečky pro pseudo-prvky v moderním kódu.

Porovnávací tabulka:

Charakteristika	Pseudo-třída	Pseudo-prvek
Syntaxe	:selector	::selector
Účel	Stav prvku	Část prvku nebo generovaný obsah