Porozumění selektoru CSS :nth-child().

Stejně jako všechny selektory CSS můžete použít :nth-child() k identifikaci prvků na webové stránce a aplikovat na ně styly. Tento volič vám však umožňuje zúžit množinu sourozenců na základě jejich relativní pozice.

Selektor podporuje některá základní klíčová slova pro běžné případy, ale také poskytuje výkonnou syntaxi pro porovnávání vzorů. Pomocí něj můžete podle svých potřeb vybírat prvky na základě pravidelných, opakujících se vzorů nebo složitějších definic.

Syntaxe selektoru :nth-child().

Jako Selektor pseudotříd CSS, syntaxe :nth-child() se liší od ostatních selektorů. Bere argument jako vzor pro párování prvků v sadě sourozenců:

:nth-child(args) {
/*...*/
}

Hlavní důraz je kladen na argumenty v závorkách. Tyto argumenty definují podmnožinu prvků, které se mají vybrat.

Použití hodnot klíčových slov pro běžné případy

Tento selektor může obsahovat dvě hodnoty klíčových slov: zvláštní a dokonce. Jsou zvláště užitečné pro styling alternativních řádků v tabulce.

Jednoduchý uspořádaný seznam je dalším dobrým příkladem, kdy můžete použít tyto hodnoty klíčových slov:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Za použití :n-té dítě (liché) selektoru, můžete změnit barvu každé alternativní položky:

:nth-child(odd) {
color: red;
}

Položky začínají na indexu 1, takže první položka se zobrazí červeně, pak třetí a tak dále:

Funkční zápis pro větší flexibilitu

K výběru jednotlivého prvku můžete použít jedno celé číslo, například takto:

li:nth-child(4) {
color: red;
}

V tomto případě selektor odpovídá pouze čtvrté položce v seznamu:

Tato syntaxe je speciálním případem obecnější funkční syntaxe, která vybírá položky, které odpovídají danému vzoru. Tato syntaxe je:

:nth-child(An+B) {
/*...*/
}

V tomto zápisu A je velikost kroku. To znamená, kolikrát se volič přesune pro výběr další položky. Umožňuje vám vybrat každou další položku, každou třetí položku atd. B je výchozím bodem, kde začíná výběr.

Vezměme například argument 3n+1:

li:nth-child(3n+1) {
color: red;
}

Tím se zahájí výběr na první položce a bude pokračovat s každou třetí položkou:

Porovnejte to s výrazem 3n+2:

li:nth-child(3n+2) {
color:red;
}

Tím se stále vybere každá třetí položka, ale nyní to začíná od druhé položky v seznamu:

Dalším zajímavým příkladem je :n-té dítě (n+3):

li:nth-child(n+3) {
color: red;
}

Tento vybere každou položku (n), počínaje třetí (+3). Bude to vypadat takto:

K dosažení určitých výsledků můžete také použít odečítání:

li:nth-child(3n-1) {
color: red;
}

Tento příklad stále vybírá každou třetí položku, ale začíná od „minus první“. Ve skutečnosti to znamená, že vybere druhou položku v seznamu, poté pátou a tak dále:

The of Syntax

Můžete také použít klíčové slovo z následuje a volič jako argument v selektoru :nth-child(). Tato syntaxe vám umožňuje zúžit možné položky, ze kterých běžný vzor vybírá.

Představte si například, že vaše označení je složitější než originál:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Nyní použijte :nth-child k výběru sudých položek ze sady položek s konkrétní třídou:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Všimněte si, že pouze tučné položky se sudými čísly jsou červené:

Zvažte také, v čem se toto liší li.new: n-té dítě (sudé) která cílí na .nové prvky, ale pouze pokud jsou sudé. To by byly položky 2 a 6 ve výše uvedeném příkladu.

Práce se selektorem :nth-child().

Pomocí selektoru :nth-child() můžete dosáhnout jedinečných návrhů. Můžete vytvářet barevné webové stránky a zvýrazňovat řádky a sloupce v datových tabulkách. Kombinace s dalšími selektory CSS vám pomůže vytvořit komplexní rozvržení a návrhy.