Pochopenie CSS :nth-child() Selector

Rovnako ako všetky selektory CSS môžete použiť :nth-child() na identifikáciu prvkov na webovej stránke a aplikovanie štýlov na ne. Tento volič vám však umožňuje zúžiť skupinu súrodencov na základe ich relatívnej polohy.

Selektor podporuje niektoré základné kľúčové slová pre bežné prípady, ale poskytuje aj výkonnú syntax na porovnávanie vzorov. Pomocou nej môžete vyberať prvky na základe pravidelných, opakujúcich sa vzorov alebo zložitejších definícií podľa vašich potrieb.

Syntax selektora :nth-child().

Ako Selektor pseudotried CSS, syntax :nth-child() sa líši od ostatných selektorov. Argument berie ako vzor na porovnávanie prvkov v množine súrodencov:

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

Hlavný dôraz sa kladie na argumenty v zátvorkách. Tieto argumenty definujú podmnožinu prvkov, ktoré sa majú vybrať.

Používanie hodnôt kľúčových slov pre bežné prípady

Tento selektor môže obsahovať dve hodnoty kľúčových slov: zvláštny a dokonca. Sú obzvlášť užitočné pre styling striedavých riadkov v tabuľke.

Jednoduchý usporiadaný zoznam je ďalším dobrým príkladom toho, kedy môžete použiť tieto hodnoty kľúč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>

Pomocou :n-té dieťa (nepárne) selektor, môžete zmeniť farbu každej alternatívnej položky:

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

Položky začínajú indexom 1, takže prvá položka sa zobrazí ako červená, potom tretia a tak ďalej:

Funkčný zápis pre väčšiu flexibilitu

Na výber jednotlivého prvku môžete použiť jedno celé číslo, napríklad takto:

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

V tomto prípade sa selektor zhoduje iba so štvrtou položkou v zozname:

Táto syntax je špeciálnym prípadom všeobecnejšej funkčnej syntaxe, ktorá vyberá položky, ktoré zodpovedajú danému vzoru. Táto syntax je:

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

V tomto zápise A je veľkosť kroku. To znamená, koľkokrát sa volič presunie na výber ďalšej položky. Umožňuje vám vybrať každú ďalšiu položku, každú tretiu položku atď. B je počiatočný bod, kde začína výber.

Vezmime si napríklad argument 3n+1:

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

Toto začne výber od prvej položky a bude pokračovať každou treťou položkou potom:

Porovnajte to s výrazom 3n+2:

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

Týmto sa stále vyberie každá tretia položka, ale teraz sa začína druhou položkou v zozname:

Ďalším zaujímavým príkladom je :n-té dieťa (n+3):

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

Tento vyberie každú položku (n), počnúc treťou (+3). Bude to vyzerať takto:

Na dosiahnutie určitých výsledkov môžete použiť aj odčítanie:

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

Tento príklad stále vyberá každú tretiu položku, ale začína od „najprv mínus“. V skutočnosti to znamená, že vyberie druhú položku v zozname, potom piatu a tak ďalej:

The of Syntax

Môžete použiť aj kľúčové slovo z nasleduje a selektor ako argument v selektore :nth-child(). Táto syntax vám umožňuje zúžiť možné položky, z ktorých vyberá bežný vzor.

Predstavte si napríklad, že vaše označenie je komplikovanejšie ako pôvodné:

<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>

Teraz pomocou :nth-child vyberte párne položky zo skupiny položiek s konkrétnou triedou:

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

Všimnite si, že iba párne tučné položky sú červené:

Zvážte tiež, ako sa to líši od li.new: n-té dieťa (párne) ktorý sa zameriava na .nové prvky, ale len ak sú párne. Vo vyššie uvedenom príklade by to boli položky 2 a 6.

Práca so selektorom :nth-child().

Jedinečné návrhy môžete dosiahnuť pomocou selektora :nth-child(). Môžete vytvárať farebné webové stránky a zvýrazniť riadky a stĺpce v dátových tabuľkách. Kombinácia s inými selektormi CSS vám pomôže vytvoriť zložité rozloženia a návrhy.