Selektory (třídy, id, tagy)

00:00:00

CSS pravidlo bez selektoru by nevědělo, na co se vztahuje. Selektor je ten, kdo řekne: „toto pravidlo platí pro tyto prvky." Naučit se dobře používat selektory je základ celého CSS.

Selektor podle tagu

Nejjednodušší selektor cílí přímo na HTML tag. Pravidlo pak platí pro všechny prvky daného tagu na celé stránce.

h1 {
  font-size: 2rem;
  color: #222;
}

p {
  line-height: 1.7;
}

Selektor h1 přizpůsobí každý nadpis první úrovně na stránce. Selektor p nastaví výšku řádku pro každý odstavec. Jednoduché, ale silné – a proto se hodí pro základní nastavení celého webu.

Selektor podle třídy (class)

Třída je pojmenovaná skupina prvků, které chceš stylovat stejně. V HTML ji přidáš atributem class, v CSS ji označíš tečkou (.) před názvem.

/* CSS */
.btn-gold {
  background-color: goldenrod;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

<!-- HTML -->
<a href="kontakt.html" class="btn-gold">Napsat zprávu</a>
<button class="btn-gold">Odeslat</button>

Oba prvky – odkaz i tlačítko – budou vypadat stejně, protože sdílejí třídu btn-gold. Jeden prvek může mít i více tříd najednou, oddělených mezerou:

<button class="btn-gold btn-nav">Zpět</button>

Třídy jsou nejčastěji používaný typ selektoru. Jsou znovupoužitelné a flexibilní.

Selektor podle ID

ID je jedinečný identifikátor – každé ID smí být na stránce použito pouze jednou. V HTML ho přidáš atributem id, v CSS ho označíš mřížkou (#).

/* CSS */
#hlavni-obsah {
  max-width: 900px;
  margin: 0 auto;
}

<!-- HTML -->
<main id="hlavni-obsah">...</main>

ID má velmi vysokou specificitu – přebije téměř vše. To může být výhoda, ale i zdroj problémů. Proto se ID v CSS stylech moc nepoužívají; jejich hlavní role je jako kotva pro kotevní odkazy a pro JavaScript.

Kombinování selektorů

Selektory lze kombinovat, čímž přesněji zacílíš na konkrétní prvky:

Potomkový selektor (a b) – prvky b uvnitř prvků a, na libovolné hloubce.
```
nav a {
  text-decoration: none;
}
```
Přímý potomek (a > b) – pouze přímí potomci, ne hlouběji zanořené.
```
ul > li {
  list-style: disc;
}
```
Více selektorů najednou (a, b) – stejné pravidlo pro více selektorů.
```
h1, h2, h3 {
  font-family: Georgia, serif;
}
```
Tag s třídou (a.trida) – pouze prvky daného tagu, které mají danou třídu.
```
button.btn-gold {
  cursor: pointer;
}
```

Pseudotřídy

Pseudotřídy popisují stav nebo pozici prvku. Začínají dvojtečkou (:).

a:hover – odkaz při najetí myší
a:focus – prvek při soustředění (klávesnice) – nikdy nezakazuj, je nezbytný pro přístupnost
li:first-child – první prvek seznamu
li:last-child – poslední prvek seznamu
li:nth-child(2n) – každý sudý prvek

a:hover {
  text-decoration: underline;
}

a:focus {
  outline: 3px solid goldenrod;
}

Specificita – kdo vyhraje při konfliktu?

Když na stejný prvek platí více CSS pravidel, prohlížeč musí rozhodnout, které z nich se použije. Pravidlem je specificita – čím konkrétnější selektor, tím vyšší prioritu má:

Inline styl (style="color: red") – nejvyšší priorita
ID selektor (#nazev) – velmi vysoká priorita
Class selektor (.nazev) a pseudotřídy – střední priorita
Tag selektor (p, a) – nejnižší priorita

p { color: black; }         /* tag – nízká specificita */
.clanek p { color: navy; }   /* class + tag – vyšší specificita, vyhraje */

Pokud mají dvě pravidla stejnou specificitu, vyhraje to, které je v souboru níže (pozdější přepíše dřívější).

Poznámka k !important: Lze přidat za hodnotu a přebije téměř vše: color: red !important;. Nepoužívej ho jako první řešení – je to záchranný padák, ne běžný nástroj. Nadměrné používání !important vede k nepřehledným stylům, které se špatně ladí.

Tip od Zdeňka

Zdeněk radí: Nezapomínej na styl pro :focus. Mnoho designérů ho odstraní, protože „vypadá ošklivě", ale pro uživatele klávesnice – a tedy pro všechny nevidomé – je absolutně nezbytný. Bez viditelného focusu se nedá zjistit, kde na stránce se nacházíš. Pokud ti výchozí outline vadí, uprav ho – ale nikdy ho neskrývej úplně.