Pořadí v CSS selektorech

Existuje skupina pokročilých selektorů umožňujících ovlivňovat prvky v závislosti na jejich pořadí. Je důležité mít na paměti, že pořadí se počítá vždy v rámci sourozenců se stejným rodičem. Kdykoli zabalíte skupinu prvků do jiného (např. <atricle>, <div> nebo <ul>), začíná se uvnitř vždy počítat od jedničky.

first-child, last-child

Začněme zlehka. Těmto selektorům prvek vyhoví, pokud je první (resp. poslední) mezi svými sourozenci. Můžete je samozřejmě kombinovat s názvem prvku, čili :first-child vyhoví kterýkoli první prvek, zatímco p:first-child je ten první prvek, který je zároveň prvkem <p>.

Podívejme se na příklad. Mějme tuto CSS definici:

p:first-child {
    color: green;
}

a tento HTML kód (vynechávám obal, ponechávám jen obsah prvku <body>):

<h1>Stránka</h1>

<p>Nebude zelený, protože není první.
Před ním je h1.</p>

<blockquote>
  <p>Tenhle bude zelený.</p>

  <p>Tenhle už ne, není první mezi sourozenci.</p>
</blockquote>

<ul>
  <li>Nebude zelený, není p.</li>
  <li>A tenhle není ani p, ani první.</li>
</ul>

nth-child, nth-last-child

Nejen první a poslední si zaslouží pozornost. Pomocí nth-child lze ovlivnit prvek na libovolné pozici, stačí ji zapsat číslem do závorek za název selektrou. nth-last-child funguje stejně, ale počítá od konce. Čili předchozí dva selektory jsou vlastně zbytečné, protože first-child je totéž co nth-child(1), zatímco last-child je ekvivalentem nth-last-child(1).

Pokud byste chtěli z nějakého důvodu mít třetí položku v seznamech šedou, zařídilo by to pravidlo

li:nth-child(3) {
    color: gray;
}

A pokud by se to mělo týkat jen seznamů s odrážkami:

ul > li:nth-child(3) {
    color: gray;
}

Tím ovšem selektor nth-child zdaleka nevystřílel prach. Místo čísla můžete totiž uvést klíčové slovo odd nebo even a ovlivnit všechny liché nebo sudé prvky. Jednou z oblíbených aplikací je rozlišení řádků v tabulkách. Pokud vám čáry mezi buňkami tabulky připadají příliš hrubé, můžete každému druhému řádky tabulky nastavit lehce odlišné pozadí. Řekněme, že stránka má bílé pozadí a sudým řádkům přiřadíme světle šedé (takhle to vypadá):

tr:nth-child(even) {
    background-color: #eee;
}

Jízda ovšem pokračuje, protože sudé/liché řádky se dají zobecnit. Číslo řádku lze zapsat v podobě obecného vzorce Xn+Y, kde X a Y budou přirozená čísla. Například nth-child(3n+1) bude platit pro první, čtvrtý, sedmý, desátý... prvek, zkrátka každý, jehož pořadové číslo se dá vyjádřit jako násobek trojky plus 1.

Je zřejmé, že klíčová slova pro sudé/liché řádky jsou opět nadbytečná (ale praktická a výmluvná). Místo odd lze psát nth-child(2n+1) a even má stejný význam jako nth-child(2n).

Vzorce v pořadových číslech vám umožňují trochu si zařádit. Zajímavou variantou je, pokud je Y větší než X. Znamená to, že s opakováním se začne až od určité hodnoty. Například

tr:nth-child(2n+10) {
    background-color: #eee;
}

přiřadí světle šedé pozadí sudým řádkům tabulky, ale až od desátého dál.

Vše uvedené platí i pro nth-last-child, jen v opačném směru.

nth-of-type, nth-last-of-type

Varianta předchozích selektorů, ovšem do pořadí se započítávají jen prvky uvedeného typu. Selektoru h2:nth-child(2) vyhoví takový prvek <h2>, který je zároveň druhý v pořadí potomků svého rodiče. Naproti tomu h2:nth-of-type(2) vyhoví druhý mazi prvky <h2> stejného rodiče.

Řekněme, že prvke <body> má následující obsah:

<h1>Instalace</h1>

<h2>Požadavky</h2>

<p>Program ke své činnosti potřebuje...</p>

<h2>Postup instalace</h2>

<p>Instalaci zahajte...</p>

Pravidlo

h2:nth-child(2) {
    color: red;
}

obarví červeně nadpis „Požadavky“, který je druhým prvkem na stránce a zároveň se jedná o prvek <h2>. Pravidlo

h2:nth-of-type(2) {
    color: red;
}

obarví červeně nadpis „Postup instalace“, který je druhý mezi prvky typu <h2>. Pokud by za úvodním nadpisem následoval odstavec textu a teprve po něm nadpis „Požadavky“, neobarvilo by první pravidlo nic, protože druhý prvek v pořadí je typu <p>. Na činnosti druhého pravidla by se nic nezměnilo, druhým prvkem typu <h2> nadále zůstává „Postup instalace“.

nth-last-of-type opět dělá totéž, ovšem pozpátku směrem od konce dokumentu.

zpět: selektory v CSS