7.1. Pseudotřídy

Věděli jste, že je možné vytvářet interaktivní efekt pomocí CSS? K tomu, aby toto bylo možné, vznikly pseudotřídy. Poznáme je podle toho, že jsou vždy na konci selektoru, a začínají dvojtečkou.

selektor:pseudotřída {
  vlastnost: hodnota;
}

Pseudotřídy mají oblikle vliv na aktuální stav elementu, např. vůči kurzoru:

/*
Odkaz, který už byl uživatelem navštíven.
*/
a:visited {
  color: purple;
}

/*
Odkaz, nad kterým je kurzor myši.
*/
a:hover {
  color: red;
}

/*
Odkaz, nad kterým je tzv. focus - vybrání (např. pomocí klávesnice).
*/
a:focus {
  color: navy;
}

/*
Aktivní odkaz, tj. při kliknutí
*/
a:active {
  color: green;
}

<a href="http://geekgirlscarrots.org">Hej! Já jsem odkazem na karotky!</a>

Hej! Já jsem odkazem na karotky!

Různé pseudotřídy můžeme aplikovat na různé elementy, v závislosti na jejich vlastnostech. Například pro elementy typu <input> a <button> existuje pseudotřída :disabled, <input type="checkbox"> má pseudotřídu :checked, ale našli bychom i další.

Zajímavé druhy pseudotříd jsou :first-child, :last-child, a :nth-child(). Asi tušíte, že nám pomáhaví vybírat prvky v závislosti na tom, kde se vyskytují vzhledem k mateřskému prvku. Podívejme se tedy opět na nákupní seznam:

<ul class="shopping-list">
  <li>Jablka</li>
  <li>Banány</li>
  <li>Švestky</li>
  <li>Pomeranče</li>
  <li>Mango</li>
  <li>Petržel</li>
  <li>Celer</li>
  <li>Pórek</li>
  <li>Mrkev</li>
  <li>Cibule</li>
</ul>

/* Vybereme první prvek li v .shopping-list */
.shopping-list li:first-child {
  font-weight: bold;
}

/* Vybereme poslední prvek li v .shopping-list */
.shopping-list li:last-child {
  text-decoration: line-through;
}

/* Vybereme třetí li element */
.shopping-list li:nth-child(3) {
  color: deeppink;
}

• Jablka
• Banány
• Švestky
• Pomeranče
• Mango
• Petržel
• Celer
• Pórek
• Mrkev
• Cibule

Pseudotřída :first-child a :last-child vypadá celkem pochopitelně. Ovšem :nth-child() nám nabízí více možností. Umožňuje zvolit všechny sudé prvky (:nth-child(even)), liché (:nth-child(odd)), třetí prvek (:nth-child(3)), každý třetí prvek (:nth-child(3n)), nebo například 4, 7, a 10 prvek (:nth-child(3n+1))