5.2. Složené selektory

Už víme, jak vytvářet jednoduché CSS selektory. Můžeme stylovat prvky pomocí jejich názvu, atributu, id, nebo třídy. Je čas pustit se do něčeho trochu obtížnějšího.

CSS umožňuje vytvářet kombinace selektorů. To nám pomáhá vytvořit užší kritérium pro výběr prvku. Podívejme se na několik příkladů:

/* 
Výběr všech elementů typu 'input', 
které mají atribut 'type' s hodnotou 'text' 
*/
input[type="text"] {
  color: #f14b5c;
}

/*
Výběr všech elementů typu 'li' 
s třídou 'active'.
*/
li.active {
  background-color: yellow;
}

/*
Vybrání všech elementů, 
které mají třídu 'news' 
a zároveň třídu 'items'.
*/
.news.items {
  border: 1px dotted #ea52bc
}

Jak je tedy uvedeno výše, pokud dáte dohromady dva (nebo více) selektorů, znamená to, že pravidla CSS budou použita pro položky, které splňují všechna tato kritéria. Pozor! Zápis těchto selektorů je prováděn bez mezer.

CSS nám však umožňuje zvolit i vnořené prvky. Představme si modelovou situaci, kdy budou vedle sebe existovat dva boxy s odkazy. Odkazy v levém boxu chceme vykreslit modře, zatímco v právém růžově. Mohli bychom na každý odkaz dát třídu, dle které bychom v CSS vybírali odkazy. To by však znamenalo psaní velkého množství kódu. Proto je vhodné zvolit odkazy pomocí vnořených prvků:

<div class="leftBox">
  <ul>
    <li><a href="www.odkaz.cz" class="active">Odkaz</a></li>
    <li><a href="www.odkaz.cz">Odkaz</a></li>
    <li><a href="www.odkaz.cz">Odkaz</a></li>
  </ul>
</div>
<div class="rightBox">
  <ul>
    <li><a href="www.odkaz.cz">Odkaz</a></li>
    <li><a href="www.odkaz.cz">Odkaz</a></li>
    <li><a href="www.odkaz.cz">Odkaz</a></li>
  </ul>
</div>

/*
Vyber všechny elementy 'a' vnořené do elementu s třídou 'leftBox'.
*/
.leftBox a {
  color: blue;
}

/*
Vyber všechny elementy 'a' vnořené do elementu s třídou 'rightBox'.
*/
.rightBox a {
  color: pink;
}

Výběrovost

K vybrání elementu v HTML dokumentu je možné obvykle použít více různých CSS selektorů:

<div class="leftBox">
  <ul>
    <li><a href="www.odkaz.cz" class="active">Odkaz</a></li>
    <li><a href="/prices">Ceník</a></li>
    <li><a href="/contact">Kontakty</a></li>
  </ul>
</div>

div ul li a[href="www.odkaz.cz"] {
  border: 1px dashed azure;
  color: navy;
}

.leftBox a.active {
  border: 2px dotted red;
  color: brown;
}

Již jsme si řekli o kaskádovosti stylů. Z tohoto hlediska by se tedy měl aplikovat styl, který je použit jako druhý. Ale bude to tak? Abychom toto pochopili, musíme se podívat na koncepci specifičnosti. Každému typu selektoru připadá určitá priorita. Podívejme se na ně v pořadí od nejméně důležitých:

1) Element a pseudoelement

div { }
p::after { }

2) Třída, pseudotřída a atribut

.container { }
.list-item:first-child { }
[type="text"] { }

3) ID

#main-navigation { }

4) In-line zápis

<ul style="list-style:none;"></ul>

O pseudoelementech a pseudotřídách si povíme více později.

Podívejme se tedy, jak se skládá priorita selektorů. Jelikož jsme si prioritu rozdělili na čtyři úrovně, musíme i její zápis provádět do čtyř hodnot. Proto si každý selektor představme jako zápis čtyř čísel:

0 0 0 0

1) Za každý element a pseudoelement zvedneme čtvrtý prvek o 1

0 0 0 1

2) Za každou třídu, pseudotřídu a atribut zvedneme třetí prvek o 1

0 0 1 0

3) Za každé ID zvedneme druhý prvek o 1

0 1 0 0

4) Za každý in-line zápis zvedneme první prvek o 1

1 0 0 0

Je zde nutné poznamenat, že výše uvedené hodnoty jsou n-tice. A tak i selektor skládající se z deseti tříd nebude mít větší váhu, než prvek s jedním ID.

Vrátíme se nyní k příkladu výše. Jaký selektor bude mít přednost?

div ul li a[href="www.odkaz.cz"] {
  border: 1px dashed azure;
  color: navy;
}

.leftBox a.active {
  border: 2px dotted red;
  color: brown;
}

Pro rozhodnutí nepotřebujeme znát vlastnosti, které selektory nastavují, proto je vypustíme:

div ul li a[href="www.odkaz.cz"] { }
/* 
Máme zde tři selektory elementu a jeden atribut, zápis tedy odpovídá n-tici: 
0 0 1 3
*/

.leftBox a.active { }
/*
Zde máme jeden selektor elementu, a dva selektory třídy, n-tice je tedy:
0 0 2 1
*/

Ukázali jsme si, že priorita čísel je v z levé strany. Proto zde bude druhý zápis převažovat, neboť první dva prvky n-tic jsou totožné, ale třetí prvek n-tice je v druhém zápise větší.

!important

Pokud si vzpomenete na pořadí, jakým prohlížeč vyhodnocuje prioritu stylů v rámci umístění, vzpomenete si, že jsme v tomto seznamu zmiňovali slovo !important.Tento příznak se používá k zvednutí priority stylu. Nejčastější použítí je pak v případě, kdy v souboru s CSS kódem chceme přepsat styl prvku, s definovaným in-line stylem:

<p class="inlineStyle" style="color: gold;">Toto je ukázkový odstavec</p>

.inlineStyle {
  color: silver !important;
  padding: 5px 10px;
}

V tomto příkladu bude mít odstavec stříbrnou barvu. Protože použitím příkazu !important jsme zvedli prioritu zápisu v souboru nad in-line zápis. Tato priorita se však zvedla pouze pro vlastnost color, ne pro celý soubor, nebo styl prvku.

<section id="authors" class="section-wrapper">
  <div class="author-box">
    <h2>Jane Doe</h2>
    <p>Jane loves cookies and likes spending her time riding a bike.</p>
    <a href="http://jdoe.com" class="author-website">Jane's website</a>
  </div>
  <div class="author-box">
    <h2>Sam Smith</h2>
    <p>Sam likes swimming and eating burgers.</p>
    <a href="http://sam-smith.co.uk" class="author-website">Sam's website</a>
  </div>
</section>

.author-box a.author-website {
  color: green;
}
.section-wrapper [href="http://jdoe.com"] {
  color: yellow;
}
#authors .author-box a {
  color: orange;
}