Vícenásobný selektor

Při psaní CSS jsou způsoby, jak si ušetřit opakování znovu a znovu.

h1,
h2 { color: green; }

Selektor říká: všechny nadpisy h1 a všechny nadpisy h2

Obarví nadpisy 1. a 2. úrovně na zeleno.

Jednotlivé selektory odděluj čárkou.

Kontextový selektor

Někdy potřebuješ nastavit vlastnosti jen prvkům v určité části stránky, na to se hodí kontextový selektor.

.tip h2 { color: blue; }

Selektor říká: všechny nadpisy h2, pokud je nějaký jejich rodič libovolný element s třídou h2

Obarví se nadpisy 2. úrovně na modro, pokud jsou v prvku s třídou .tip

<h2>Já jsem výchozí barvou</h2>
<div class="tip">
    <h2>Já jsem modrý</h2>
    <div>
        <h2>Já, já, já jsem taky modrý</h2>
    </div>
</div>

Samozřejmě to funguje i jen s tagy nebo jen s třídami.

div h2 { color: red; }

.tip .nadpis { color: blue; }

<h2>Já jsem výchozí barvou</h2>
<div class="tip">
    <h2 class="nadpis">Já jsem modrý</h2>
    <div>
        <h2 class="nadpis">Já, já, já jsem taky modrý</h2>
    </div>
</div>

A taky lze definovat více zanořených prvků, ale tomu se radši vyhni. Nesnaž se kopírovat strukturu HTML do selektorů, není to dobrá praxe a přináší to spíš problémy, protože při každé změně HTML pak musíš měnit i CSS.

Ostatně většina metodik pro psaní CSS doporučuje v maximální míře stylovat pouze přes třídy i kdyby vícenásobné.

/* takto ne */
body .tip .jaja { color: blue; }

I zde platí ze Zen of Python: Simple is better than complex. a Flat is better than nested.

Existují i další druhy selektorů, ale ve valné většině případů se bez nich obejdeš.

Lze vybírat pouze přímé potomky (div > p) nebo pouze prvky, které mají společného rodiče a před sebou nějaký jiný prvek těsně (h2 + p) nebo kdekoli (h2 ~ p).

Prvky lze také vybírat podle atributu (img[alt]), či hodnot atributů (img[src="pylady.jpg"]) nebo dokonce jen jejich částí.

Jde také pomocí pseudotříd vybrat každý druhý (:nth-child(2n)) nebo třetí nebo prostě n-tý prvek, to se může hodit třeba na stylování proužkovaných tabulek.

Pokud tě zajímají, podívej se na český nebo anglický přehled selektorů.