Co jsou to pseudo-třídy v CSS?

Pseudo-třídy v CSS jsou klíčová slova, která se přidávají k selektorům, aby označila zvláštní stav prvku. Umožňují aplikovat styly na prvky na základě jejich interakce s uživatelem, jejich umístění ve struktuře dokumentu nebo jiných vlastností, které nelze vyjádřit standardními selektory.

Příklady pseudo-tříd:

• Stavy uživatele:

  • :hover - prvek, nad kterým je kurzor myši.
  • :active - prvek, který je aktivován (například stisknuté tlačítko).
  • :focus - prvek, který má fokus vstupu (například textové pole).
  • :visited - odkaz, který už uživatel navštívil.
  • :link - odkaz, který uživatel ještě nenavštívil.

• Umístění ve struktuře:

  • :first-child - první potomek rodiče.
  • :last-child - poslední potomek rodiče.
  • :nth-child(n) - n-tý potomek.
  • :first-of-type - první prvek svého typu mezi potomky.
  • :last-of-type - poslední prvek svého typu mezi potomky.

• Další:

  • :empty - prvek bez potomků nebo textu.
  • :not(selector) - prvky, které neodpovídají zadanému selektoru.

Syntaxe:

selector:pseudo-class {
  property: value;
}

Příklad použití:

/* Změna barvy textu při najetí myší na odstavec */
p:hover {
  color: blue;
}

/* Styl pro první položku seznamu */
li:first-child {
  font-weight: bold;
}

Pseudo-třídy rozšiřují možnosti selektorů, umožňují vytvářet dynamičtější a interaktivnější rozhraní bez použití JavaScriptu pro jednoduché změny stylu.