Existuje taký selektor, presnejšie pseudotrieda s názvom: n-té dieťa. Tu je príklad použitia:

UL LI: n-té dieťa (3n + 3) (farba: #CCC;)

Čo robí vyššie uvedený CSS? Vyberá každý tretí prvok vo vnútri odrážkový zoznam: toto je 3., 6., 9., 12. atď. Pozrime sa, ako presne tento výraz funguje a čo ešte môžete urobiť s: n-tým dieťaťom.

Všetko závisí od toho, čo je medzi zátvorkami. Selektor: n-tého potomka akceptuje dve kľúčové slová, párne a nepárne. Všetko je tu jednoduché: dokonca aj výber párne prvky ako 2., 4., 6. atď. a nepárne nepárne prvky ako je 1., 3., 5. atď.

Ako môžete vidieť v prvom príklade,: n-té dieťa tiež akceptuje výrazy ako parameter. Vrátane najjednoduchších rovníc, inými slovami, iba čísel. Ak ich vložíte do zátvoriek, vyberie sa iba jedna položka s príslušným číslom. Tu je napríklad postup, ako vybrať iba piatu položku:

UL LI: n-té dieťa (5) (farba: #CCC;)

Vráťme sa však k 3n + 3 z prvého príkladu. Ako to funguje a prečo je vybraná každá tretia položka? Celý trik je v pochopení premennej n a danej algebraická rovnica... Predstavte si n ako nulovú množinu celých čísel. Potom dokončite rovnicu. Takže 3n je 3 × n a celá rovnica spolu je (3 × n) +3. Teraz dosadením čísel väčších alebo rovných nule namiesto n dostaneme:

• (3 × 0) + 3 = 3 = 3. prvok
• (3 × 1) + 3 = 6 = 6. prvok
• (3 × 2) + 3 = 9 = 9. prvok atď.

A čo: n-té dieťa (2n + 1)?

• (2 × 0) + 1 = 1 = 1. prvok
• (2 × 1) + 1 = 3 = 3. prvok
• (2 × 2) + 1 = 5 = 5. prvok atď.

Tak prestaň! Toto je rovnaké ako nepárne. Potom by ste možno nemali používať tento výraz? Nekomplikujeme si však v tomto prípade náš prvý príklad? Čo ak namiesto 3n + 3 napíšeme 3n + 0, alebo ešte jednoduchšie 3n?

• (3 × 0) = 0 = nič
• (3 × 1) = 3 = 3. prvok
• (3 × 2) = 6 = 6. prvok
• (3 × 3) = 9 = 9. prvok atď.

Takže, ako vidíte, výsledok je rovnaký, čo znamená, že nie je potrebné +3. Môžeme použiť aj záporné hodnoty n, ako aj odčítanie v rovniciach. Napríklad 4n-1:

• (4 × 0) – 1 = –1 = nič
• (4 × 1) - 1 = 3 = 3. prvok
• (4 × 2) - 1 = 7 = 7. prvok atď.

Použitie -n sa môže zdať zvláštne, pretože ak je konečný výsledok negatívny, do výberu nebudú zahrnuté žiadne položky. Ak však doplníme rovnicu a výsledok bude opäť pozitívny, ukážka sa ukáže ako celkom zaujímavá: bude možné s ňou získať prvých n prvkov, napríklad takto: -n + 3:

• –0 + 3 = 3 = 3. prvok
• –1 + 3 = 2 = 2. prvok
• –2 + 3 = 1 = 1. prvok
• –3 + 3 = 0 = nič atď.

SitePoint má peknú referenciu s roztomilým nápisom, ktorý tu bez hanby zverejním:

n	2n + 1	4n + 1	4n + 4	4n	5n-2	-n + 3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

Podpora prehliadača

Selektor: nth-child je jedným z mála selektorov CSS, ktorý je takmer plne podporovaný moderné prehliadače a absolútne nie je podporovaný v IE, dokonca ani IE8. Preto, pokiaľ ide o jeho použitie, a konečný výsledok je vyrobený technológiou progresívne zlepšovanie- pokojne ho môžete použiť na niektoré dizajnové prvky, ako napríklad vyfarbovanie riadkov tabuľky. Vo vážnejších prípadoch by ste ho však nemali používať. Spoľahnite sa na to napríklad v rozložení stránky alebo odstráňte pravý okraj z každého tretieho bloku v mriežke tri krát tri, aby sa zmestili do radu.

Povedzme, že existuje HTML takto:

<p> Málo</ p>
<p> Prasiatko</ p>
</ sekcia>

Nasledujúci CSS urobí to isté:

p: n-té dieťa (2) (farba: červená;)

p: n-tého typu (2) (farba: červená;)

Aj keď v týchto selektoroch je samozrejme rozdiel.

Pseudotrieda : n-té dieťa, znamená vybrať položku, ak:

1. Tento prvok je odsek;
2. Toto je druhý prvok jedného rodiča.

Pseudotrieda : n-tý typ, znamená:

1. Vyberte druhý odsek jedného rodiča.

Predpokladajme, že naše označenie je upravené takto:

<h1> Slová</ h1>
<p> Málo</ p>
<p> Prasiatko</ p>
</ sekcia>

Teraz prvá možnosť nefunguje:

p: n-té dieťa (2) (farba: červená;) / * Nefunguje * /

Druhý pokračuje v práci:

p: n-tého typu (2) (farba: červená;) /* Stále pracujem */

Pod pojmom „Nefunguje“ mám na mysli: volič n-tého dieťaťa vyberie „Malý“ namiesto „Prasiatko“. Pretože prvok spĺňa obe podmienky: 1) Toto je druhý prvok nadradeného prvku a 2) Toto je odsek. Pod pojmom "Stále beží" mám na mysli, že selektor stále dostáva "Prasiatko", pretože je to druhý odsek rodiča.

Ak pridáte

po

potom volič s: n-té dieťa nič si nevyberie pretože paragraf už nie je druhá položka. Selektor s: n-tého typu bude naďalej fungovať.

Zdá sa mi: n-tý typ je menej krehký a vo všeobecnosti užitočnejší, napriek tomu: n-té dieťa je naďalej hlavným v práci. Ako často si myslíte: "Chcem vybrať druhý prvok v rodičovskom bloku, ak je to odsek." Možno niekedy, ale častejšie si myslíte „Vyberte druhý odsek“ alebo „vyberte každý tretí riadok tabuľky“, pre tieto úlohy je vhodnejšie: n-tého typu (opäť podľa mňa).

Väčšina situácií, keď poviem: "Prečo môj selektor nefunguje s: n-tým dieťaťom?" sa stane kvôli tomu, že zabudnem na výber značiek a požadovaná značka sa neukáže ako tá, ktorá je potrebná. Preto pri použití: n-té dieťa je lepšie uviesť ho od rodiča a nepoužívať kotvu k značke.

dl: n-té dieťa (2) () / * Toto je lepšie ako * /
dd: n-té dieťa (2) () / * toto * /

Ale, samozrejme, všetko závisí od konkrétnej situácie.

Podpora prehliadača: n-tý typ je celkom slušný ... Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+. Povedal by som, že ak potrebujete hlbšiu podporu, použite jQuery (použite selektor a aplikujte triedu tam, kde je to potrebné), ale jQuery upustilo od podpory pre: n-tého typu. Počul som, že kvôli zriedkavému používaniu, ale zdá sa mi to zvláštne. Ak chcete ísť touto cestou, potom tu

V CSS existuje selektor, presnejšie pseudoselektor nazývaný n-té dieťa. Príklad jeho použitia:

Ul li: n-té dieťa (3n + 3) (farba: #ccc;)

Vyššie uvedený CSS robí nasledovné: Použiť štýly na každú tretiu položku v zozname odrážok. Menovite 3., 6., 9., 12. atď. Ale ako to funguje? A tiež, ako môžete využiť používanie n-tého dieťaťa?

Hlavným bodom je výraz v zátvorkách. n-té dieťa akceptuje dve kľúčové slová: dokonca(párne) a zvláštny(zvláštny). Ich význam je úplne jasný. Párne vyberie párne prvky (2, 4, 6), nepárne vyberie nepárne (1, 3, 5).

Ako je uvedené v príklade vyššie, n-té dieťa dokáže spracovať výrazy. Aký je najjednoduchší možný výraz? Len číslo. Ak napíšete číslo do zátvoriek, vyberie sa jedna jediná položka. Vyberme napríklad piatu položku v zozname:

Ul li: n-té dieťa (5) (farba: #ccc;)

Vráťme sa k nášmu prvému príkladu, v ktorom sme použili výraz (3n + 3). ako pracuje? Prečo si vyberá každý tretí prvok? Celý bod je v premennej n. Prijíma celočíselné hodnoty od nuly a viac. Poďme sa na to pozrieť bližšie:

(3 x 0) + 3 = 3 = 3. prvok (3 x 1) + 3 = 6 = 6. prvok (3 x 2) + 3 = 9 = 9. prvok atď.

Teraz skúsme nasledujúci výraz: n-té dieťa (2n + 1):

(2 x 0) + 1 = 1 = 1. prvok (2 x 1) + 1 = 3 = 3. prvok (2 x 2) + 1 = 5 = 5. prvok atď.

Nakoniec sme dostali to isté ako v prípade nepárneho, takže takýto výraz netreba často používať. Navyše, náš prvý príklad možno tiež zjednodušiť a použiť namiesto pôvodného výrazu (3n + 3), výraz (3n):

(3 x 0) + 0 = 0 = žiadna zhoda (3 x 1) + 0 = 3 = 3. prvok (3 x 2) + 0 = 6 = 6. prvok atď.

Ako vidíte, výsledok je rovnaký, ale nemusíte písať "+3". Vo výraze môžeme použiť aj záporné hodnoty. Napríklad 4n-1:

(4 x 0) - 1 = -1 = žiadna zhoda (4 x 1) - 1 = 3 = 3. prvok (4 x 2) - 1 = 7 = 7. prvok atď.

Použitie záporných hodnôt pre koeficient v n vyzerá trochu zvláštne, pretože ak je výsledok záporný, nenájde sa žiadna zhoda. Budete musieť neustále meniť výraz, aby ste pridali pozitívne prvky. Ako sa ukázalo, tento prístup je veľmi vhodný na výber prvých n prvkov. Pozrime sa na príklad s "-n + 3":

0 + 3 = 3 = 3. prvok -1 + 3 = 2 = 2. prvok -2 + 3 = 1 = 1. prvok -3 + 3 = 0 = žiadna zhoda

Kompatibilita medzi prehliadačmi

n-té dieťa je jedným z tých nešťastných atribútov, ktoré sú úplne odlišné pre prehliadače absolútna nula v IE dokonca aj verzia 8. Takže pokiaľ ide o jeho použitie, potom ak je očakávaný výsledok nejakým spôsobom vizuálny efekt(napríklad vyfarbenie riadkov určitej tabuľky), potom je to ideálny prístup. Pravdepodobne by ste ho však nemali používať na niečo dôležitejšie, čo by mohlo ovplyvniť napríklad správnosť rozloženia.

Samozrejme, ak používate jQuery, potom by ste sa toho nemali obávať, pretože jQuery funguje aj v Internet Exploreri.

A nakoniec

Môžete sa hrať s rôzne výrazy pre zapnutý volič

Pseudotrieda: nth-child sa používa na štýlovanie prvkov na základe číslovania v strome prvkov.

Označenia

	Popis	Príklad
<тип>	Označuje typ hodnoty.	<размер>
A && B	Hodnoty musia byť zobrazené v zobrazenom poradí.	<размер> && <цвет>
A | B	Označuje, že by sa mala vybrať iba jedna z navrhovaných hodnôt (A alebo B).	normálne | malé čiapky
A || B	Každá hodnota môže byť použitá samostatne alebo v spojení s inými v ľubovoľnom poradí.	šírka || počítať
	Hodnoty skupín.	[plodina || kríž]
*	Opakujte nula alebo viackrát.	[,<время>]*
+	Opakujte jeden alebo viackrát.	<число>+
?	Zadaný typ, slovo alebo skupina sú voliteľné.	vložka?
(A, B)	Opakujte aspoň A, ale nie viac ako B-krát.	<радиус>{1,4}
#	Opakujte jeden alebo viackrát, oddelené čiarkami.	<время>#

×

Hodnoty

nepárne Všetky nepárne čísla prvkov. párne Všetky párne čísla prvkov.<число> Sériové číslo podradený prvok vzhľadom na jeho rodiča. Číslovanie začína od 1, toto bude prvá položka v zozname.<выражение>Zadáva sa ako ± b, kde a a b sú celé čísla a n je počítadlo, ktoré automaticky nadobúda hodnotu 0, 1, 2 ...

Ak sa a rovná nule, tak sa nezapíše a záznam sa skráti na b. Ak sa b rovná nule, tak sa tiež neuvádza a výraz sa zapisuje v tvare an. a a b môžu byť záporné čísla, v tomto prípade sa znamienko plus zmení na mínus, napríklad: 5n-1.

Použitím záporných hodnôt pre a a b môžu byť niektoré výsledky tiež záporné alebo nulové. Položky sú však ovplyvnené iba kladnými hodnotami kvôli číslovaniu položiek od 1.

Tabuľka 1 ukazuje niektoré možné výrazy a Kľúčové slová a tiež uvádza, o ktoré čísla položiek pôjde.

Tab. 1. Výsledok pre rôzne významy pseudotrieda

Význam	Čísla položiek	Popis
1	1	Prvý prvok je synonymom pre: alias prvého dieťaťa.
5	5	Piaty element.
2n	2, 4, 6, 8, 10,…	Všetky párne prvky, analógové párne.
2n + 1	1, 3, 5, 7, 9,…	Všetky nepárne prvky, analóg nepárnej hodnoty.
3n	3, 6, 9, 12, 15,…	Každý tretí prvok.
3n + 2	2, 5, 8, 11, 14,…	Každý tretí prvok, počnúc druhým.
n + 4	4, 5, 6, 7, 8,…	Všetky prvky okrem prvých troch.
-n + 3	3, 2, 1	Prvé tri prvky.
5n-2	3, 8, 13, 18, 23,…	—
dokonca	2, 4, 6, 8, 10,…	Všetky párne prvky.
zvláštny	1, 3, 5, 7, 9,…	Všetky nepárne položky.

Je povolené kombinovať dve: pseudotriedy n-tého potomka na výber rozsahu prvkov. Tu sa vyberú všetky položky 2 až 5.

: n-té dieťa (n + 2): n-té dieťa (-n + 5) (...)

Príklad

	2134	2135	2136	2137	2138
Olej	16	34	62	74	57
Zlato	4	69	72	56	47
Drevo	7	73	79	34	86
Kamene	23	34	88	53	103

V tento príklad Pseudotrieda: nth-child sa používa na zmenu štýlu prvého riadku tabuľky, ako aj na zafarbenie všetkých párnych riadkov (obrázok 1).

Ryža. 1. Použitie pseudotriedy: n-té dieťa na riadky tabuľky

Špecifikácia

Každá špecifikácia prechádza niekoľkými fázami schvaľovania.

• Odporúčanie – Táto špecifikácia bola schválená W3C a odporúča sa ako štandard.
• Odporúčanie kandidáta ( Možné odporúčanie) – skupina zodpovedná za štandard je presvedčená, že je v súlade s jeho cieľmi, ale na implementáciu štandardu je potrebná pomoc komunity vývojárov.
• Navrhované odporúčanie ( Navrhované odporúčanie) – V tomto bode je dokument predložený poradnej rade W3C na konečné schválenie.
• Pracovný návrh – Vyspelejšia verzia návrhu po diskusii a dodatkoch na posúdenie komunitou.
• Návrh redaktora ( Redakčný návrh) - návrh verzie normy po úprave editormi projektu.
• Návrh ( Návrh špecifikácie) je prvým návrhom normy.

×