poate fi de asemenea numărat, iar numărul său ordinal va fi al treilea (al treilea copil al părintelui său ). Pentru a stila aceste elemente trebuie să folosim o pseudo clasă : al-lea-copil.

Să trecem la un exemplu:

Primul titlu h2 al etichetei body

• unu
• Două
• Trei

Al doilea titlu h2 al etichetei corporale

: al-lea-copil am stilizat elementele

Și

, care au un element fiu ordinal specific în elementele lor părinte.

Rezultatul exemplului nostru:

Stilizarea după cuvinte cheie

Ca valoare pseudo-clasă :nth-child() poate fi nu numai numărul de serie al elementelor copil care trebuie stilate, ci și cuvinte cheie care pot defini un întreg grup de elemente. Puteți utiliza două valori pentru cuvântul cheie:

• par (elementele pare)
• impar (elementele impare)

Stilizarea elementelor folosind cuvinte cheie are o aplicație foarte largă, deoarece puteți selecta și stiliza cu ușurință elementele secundare pare sau impare dintr-un document.

Să creăm două tabele simple cu clase de stil diferite ca exemplu și să vizualizăm diferența în utilizarea valorilor cuvintelor cheie pseudo-clase : al-lea-copil pentru elementul HTML care definește un rând de tabel:

Valoare par (par)

1 linie	Poziţie	Cantitate
2 rând
3 rând
4 linii
5 rând

Valoare impară

1 linie	Poziţie	Cantitate
2 rând
3 rând
4 linii
5 rând

În acest exemplu, folosind pseudo-clasa :nth-child() noi am stilizat chiar rândurile primului tabel (elementele ) Și ciudatîn cel de-al doilea tabel.

Stilizarea folosind o formulă matematică simplă

Pseudo-clasă :nth-child() vă permite să selectați nu numai elemente pare, impare sau copil cu un anumit număr de serie, ci și elemente copil specificate printr-o formulă matematică elementară. Să ne uităm la următorul selector și să înțelegem ce înseamnă această intrare:

td:nth-child(4n+2)

) în interiorul liniei, începând de la a doua celulă de tabel, se va stiliza:

• 4n– fiecare al patrulea element.
• 2

În formule, este posibil să se utilizeze valori cu un semn de scădere, dar acest lucru nu este de obicei necesar:

td:nth-child(4n-1)(culoare de fundal: albastru deschis; /* setează culoarea de fundal */ )

Acest selector înseamnă că fiecare a patra celulă din tabel ( ) în interiorul rândului, începând de la a treia celulă a tabelului (nu există -1 celulă din motive obiective, deci există o deplasare la stânga), vor fi stilizate:

• 4n– fiecare al patrulea element.
• -1 – cu ce element să începem.

Să ne uităm la un exemplu de utilizare:

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

În acest exemplu, folosind pseudo-clasa:nth-child, am selectat și stilizat fiecare a patra celulă din tabel ( ) în interiorul rândului, începând de la a doua celulă de tabel. Rezultatul exemplului nostru:

basicweb.ru

Cum funcționează selectorul Nth-child CSS

În CSS există un selector, un pseudo-selector pentru a fi mai precis, numit nth-child. Un exemplu de utilizare a acestuia:

Ul li:nth-child(3n+3) (culoare: #ccc; )

CSS-ul de mai sus face următoarele: Aplicați stilul fiecărui al treilea element dintr-o listă neordonată. Și anume al 3-lea, al 6-lea, al 9-lea, al 12-lea etc. Dar cum funcționează? Și, de asemenea, ce beneficii pot fi obținute prin utilizarea nth-child?

Sensul principal este în expresia dintre paranteze. nth-child acceptă două cuvinte cheie: chiar(chiar) și ciudat(ciudat). Sensul lor este absolut clar. Par selectează elementele pare (2, 4, 6), impar selectează elementele impare (1, 3, 5).

După cum se arată în exemplul de mai sus, nth-child poate procesa expresii. Care este cea mai simplă expresie posibilă? Doar un număr. Dacă scrieți orice număr între paranteze, va fi selectat un singur element. De exemplu, să selectăm al cincilea element al listei:

Ul li:nth-child(5) (culoare: #ccc; )

Să revenim la primul nostru exemplu, în care am folosit expresia (3n+3). Cum lucrează? De ce selectează fiecare al treilea element? Întregul punct se află în variabila n. Acceptă valori întregi de la zero și mai sus. Să aruncăm o privire mai atentă:

(3 x 0) + 3 = 3 = al 3-lea element (3 x 1) + 3 = 6 = al 6-lea element (3 x 2) + 3 = 9 = al 9-lea element etc.

Acum să încercăm următoarea expresie: nth-child(2n+1) :

(2 x 0) + 1 = 1 = primul element (2 x 1) + 1 = 3 = al 3-lea element (2 x 2) + 1 = 5 = al 5-lea element etc.

Ca rezultat, am obținut același lucru ca și în cazul impar, deci nu este nevoie să folosim o astfel de expresie des. Mai mult, primul nostru exemplu poate fi, de asemenea, simplificat și folosit în locul expresiei originale (3n+3), expresie (3n):

(3 x 0) + 0 = 0 = fără potrivire (3 x 1) + 0 = 3 = al 3-lea element (3 x 2) + 0 = 6 = al 6-lea element etc.

După cum puteți vedea, rezultatul este același, dar nu trebuie să scrieți „+3”. Putem folosi și valori negative în expresie. De exemplu, 4n-1:

(4 x 0) - 1 = -1 = fără potrivire (4 x 1) - 1 = 3 = al 3-lea element (4 x 2) - 1 = 7 = al 7-lea element etc.

Utilizarea valorilor negative pentru coeficientul lui n pare puțin ciudat, deoarece dacă rezultatul este negativ, nu se va găsi nicio potrivire. Va trebui să schimbați în mod constant expresia pentru a adăuga elemente pozitive. După cum se dovedește, această abordare este foarte convenabilă pentru selectarea primelor n elemente. Să ne uităm la un exemplu cu „-n+3”:

0 + 3 = 3 = al treilea element -1 + 3 = 2 = al doilea element -2 + 3 = 1 = primul element -3 + 3 = 0 = nu se potrivește

Compatibilitate între browsere

nth-child este unul dintre acele atribute nefericite care este complet cross-browser, cu excepția zeroului absolut în IE, chiar și versiunea 8. Prin urmare, atunci când vine vorba de utilizare, dacă rezultatul așteptat este un fel de efect vizual (de exemplu, colorarea rândurilor unui anumit tabel), atunci aceasta este abordarea ideală. Dar probabil că nu ar trebui să-l utilizați pentru ceva mai important care ar putea afecta, de exemplu, corectitudinea aspectului.

Desigur, dacă utilizați jQuery, atunci nu trebuie să vă faceți griji pentru acest lucru, deoarece jQuery funcționează chiar și în Internet Explorer.

Și, în sfârșit

Puteți juca cu diferite expresii de selectare pe pagina exemplu.

www.css-tricks.ru

Valori

Sens	Descriere
Număr	Un număr pozitiv care începe de la 1. Specifică numărul elementului pe care dorim să-l accesăm. Numerotarea elementelor începe de la 1.
ciudat	Elemente ciudate.
chiar	Chiar și elemente.
Expresie	Puteți crea expresii speciale cu litera n, care reprezintă toate numerele întregi de la zero (nu de la unu!) catre infinit. Deci, 2n înseamnă toate numerele pare (începând cu a doua). Cum să înțelegi asta? Inlocuim succesiv numerele de la 0 in n si asa mai departe: daca n = 0, atunci 2n va da 0 - nu exista un astfel de element ( numerotarea elementelor începând de la 1!), dacă n = 1, atunci 2n dă 2 - al doilea element, dacă n = 2, 2n dă 4 - al patrulea element. Dacă scrieți 3n, va fi fiecare al treilea element (începând de la al treilea!), și așa mai departe.

Exemple

Exemplu

În acest exemplu, vom face roșu culoarea li, care este al 4-lea descendent părintele său (al patrulea în interiorul ol):

Rezultatul executării codului:

Exemplu

Acum să facem totul roșu chiar li:

Rezultatul executării codului:

Exemplu

Acum să facem totul roșu ciudat li:

Rezultatul executării codului:

Exemplu

Acum să-l facem roșu fiecare treime li (începând cu a treia):

Rezultatul executării codului:

Exemplu

Selectorul poate specifica o serie de elemente. Să presupunem că aveți o listă de 20 de elemente și trebuie să selectați elemente de la 7 la 14 inclusiv. O poți face astfel:

Rezultatul executării codului:

cod.mu

Sintaxă

Pseudoclasa a n-a-copil este specificată cu un singur argument, care reprezintă modelul pentru potrivirea elementelor.

Valorile cuvintelor cheie

impar Reprezintă elemente a căror poziție numerică într-o serie de frați este impară: 1, 3, 5 etc. even Reprezintă elemente a căror poziţie numerică într-o serie de fraţi este pară: 2, 4, 6 etc.

Notație funcțională

Reprezintă elemente a căror poziție numerică într-o serie de frați se potrivește cu modelul An+B , pentru fiecare număr întreg pozitiv sau valoare zero a lui n . Indicele primului element este 1 . Valorile A și B trebuie să fie ambele s.

Sintaxă formală

:al-al-lea copil( [de ]?)

Unde
= chiar ciudat
=

Unde
=

Unde
=
= ">" " " "~" " "

Unde
=

Există un astfel de selector, sau mai degrabă o pseudo-clasă, numită:nth-child . Iată un exemplu de utilizare a acestuia:

UL LI:nth-child(3n+3) (culoare:#CCC; )

Ce face codul CSS de mai sus? Selectează fiecare al treilea element din lista cu marcatori: acesta este al 3-lea, al 6-lea, al 9-lea, al 12-lea etc. Să vedem exact cum funcționează această expresie și ce altceva poți face cu :nth-child .

Totul depinde de ce este între paranteze. Selectorul:nth-child acceptă două cuvinte cheie: par și impar. Totul este simplu aici: par selectează elemente pare, cum ar fi al 2-lea, al 4-lea, al 6-lea etc., iar impar selectează elemente impare, cum ar fi 1-a, 3-a, 5-a etc. d.

După cum puteți vedea din primul exemplu, :nth-child ia și expresii ca parametru. Inclusiv cele mai simple ecuații, cu alte cuvinte, doar numere. Dacă le puneți între paranteze, va fi selectat un singur element cu numărul corespunzător. De exemplu, iată cum să selectați doar al cincilea element:

UL LI:nth-child(5) (culoare:#CCC; )

Cu toate acestea, să revenim la 3n+3 din primul exemplu. Cum funcționează și de ce este selectat fiecare al treilea element? Trucul este să înțelegem variabila n și ecuația algebrică dată. Gândiți-vă la n ca la o mulțime de numere întregi bazate pe zero. Apoi completează ecuația. Deci 3n este 3×n, iar întreaga ecuație împreună este (3×n)+3. Acum, înlocuind numere mai mari sau egale cu zero în loc de n, obținem:

• (3 × 0) + 3 = 3 = al 3-lea element
• (3 × 1) + 3 = 6 = al 6-lea element
• (3 × 2) + 3 = 9 = al 9-lea element etc.

Dar:nth-child(2n+1)?

• (2 × 0) + 1 = 1 = primul element
• (2 × 1) + 1 = 3 = al 3-lea element
• (2 × 2) + 1 = 5 = al 5-lea element etc.

Bine, oprește-te! Acesta este la fel cu ciudat. Atunci poate că nu ar trebui să folosim această expresie? Dar nu complicăm prea mult primul nostru exemplu? Dacă în loc de 3n+3 scriem 3n+0 sau chiar mai simplu 3n?

• (3 × 0) = 0 = nimic
• (3 × 1) = 3 = al 3-lea element
• (3 × 2) = 6 = al 6-lea element
• (3 × 3) = 9 = al 9-lea element etc.

Deci, după cum puteți vedea, rezultatul va fi același, ceea ce înseamnă că nu este nevoie de +3. Putem folosi valorile negative ale lui n la fel de bine ca și scăderea în ecuații. De exemplu, 4n-1:

• (4 × 0) – 1 = –1 = nimic
• (4 × 1) – 1 = 3 = al 3-lea element
• (4 × 2) – 1 = 7 = al 7-lea element etc.

Utilizarea -n poate părea ciudată - la urma urmei, dacă rezultatul final este negativ, atunci niciun element nu va fi inclus în selecție. Dar dacă adăugați la ecuație și faceți din nou rezultatul pozitiv, atunci eșantionul se va dovedi a fi destul de interesant: cu ajutorul său puteți obține primele n elemente, de exemplu astfel: -n+3:

• –0 + 3 = 3 = al 3-lea element
• –1 + 3 = 2 = al 2-lea element
• –2 + 3 = 1 = primul element
• –3 + 3 = 0 = nimic etc.

SitePoint are o referință frumoasă cu un semn frumos pe care îl voi posta fără rușine aici:

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	–

Suport pentru browser

Selectorul:nth-child este unul dintre puținii selectori CSS care este aproape pe deplin acceptat în browserele moderne și nu are absolut niciun suport în IE, nici măcar IE8. Deci, atunci când vine vorba de utilizare, iar rezultatul final este realizat folosind tehnologia de îmbunătățire progresivă, îl puteți folosi în siguranță pentru unele elemente de design, cum ar fi colorarea rândurilor de tabele. Cu toate acestea, nu trebuie utilizat în cazuri mai grave. De exemplu, bazându-te pe acesta într-un aspect al site-ului sau eliminarea marginii din dreapta din fiecare al treilea bloc într-o grilă de trei câte trei pentru a le face să se potrivească într-un rând.

Descriere

Pseudoclasa :nth-child este folosită pentru a adăuga stil elementelor bazate pe numerotarea din arborele de elemente.

Sintaxă

element:nth-child(impar | par |<число> | <выражение>) {...}

Valori

impar Toate numerele de element impar. par Toate elementele cu număr pare. număr Numărul ordinal al elementului copil relativ la părintele său. Numerotarea începe de la 1, acesta va fi primul element din listă. expresie Dată ca an+b , unde a și b sunt numere întregi, iar n este un numărător care ia automat valoarea 0, 1, 2...

Dacă a este zero, atunci nu este scris și intrarea este abreviată la b . Dacă b este zero, atunci nu este specificat și expresia este scrisă sub forma an . a și b pot fi numere negative, în acest caz semnul plus se schimbă în minus, de exemplu: 5n-1.

Folosind valori negative a și b, unele rezultate pot fi, de asemenea, negative sau zero. Cu toate acestea, elementele sunt afectate doar de valori pozitive datorită numerotării elementelor începând cu 1.

În tabel 1 arată câteva expresii și cuvinte cheie posibile și indică, de asemenea, ce numere de elemente vor fi utilizate.

HTML5 CSS3 IE Cr Op Sa Fx

	2134	2135	2136	2137	2138
Ulei	16	34	62	74	57
Aur	4	69	72	56	47
Copac	7	73	79	34	86
Pietre	23	34	88	53	103

ÎN în acest exemplu Pseudo-clasa :nth-child este folosită pentru a schimba stilul primului rând al tabelului, precum și pentru a evidenția toate rândurile cu numere pare (Figura 1).

CSS nth-child este o pseudo-clasă folosită pentru a selecta elemente folosind o expresie numerică. Sintaxa sa poate părea puțin confuză la prima vedere.

În acest articol ne vom uita la:

• moduri diferite de a folosi :nth-child ;
• selector mai flexibil :nth-of-type ;
• și selectorii asociați :nth-last-child și :nth-last-of-type .

:a-n-ul-ultimul-de-tip

:nth-last-of-type selectează elementele copil dacă poziția lor în document se potrivește cu modelul descris de expresia algebrică.

Selectorul :nth-last-of-type arată cam așa:

li:nth-child(expresie); ()

„Expresie” poate fi reprezentată prin cuvintele cheie par sau impar, un număr întreg sau o formulă precum an+b, unde a și b sunt numere întregi, pozitive sau negative.

Deoarece pseudo-clasa copil CSS a n-a poate fi folosită pentru a selecta o serie de elemente diferite. Să ne uităm la câteva exemple pentru a clarifica lucrurile.

eu am listă cu puncte din 12 elemente. Să vedem cum putem folosi :nth-child pentru a selecta un anumit element sau un set de elemente pe baza unui model:

• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum

Pentru a selecta al treilea element al listei, trebuie să specificați li:nth-child(3) . Pentru a selecta toate elementele pare, puteți utiliza cuvântul cheie par. În schimb, puteți folosi :nth-child(odd) pentru a selecta toate elementele cu numere impare.

CSS al n-lea copil la fiecare al treilea - specificați li:nth-child(3n) . Pentru a selecta primele patru elemente, utilizați li:nth-child(-n+4) . Pentru a selecta toate, cu excepția primelor patru elemente, puteți utiliza li:nth-child(n+5) .

Expresia an + b

Alternativă de utilizare cuvânt cheie impar este folosind expresia 2n+1 . Dar cum funcționează?

Când o expresie în formatul an+b conține valori a și b diferite de zero, copiii sunt împărțiți în grupuri. Dacă expresia este 2n+1, copiii sunt împărțiți în grupuri de câte doi. Fiecărui element din grup i se atribuie un index, începând cu 1. Elementul corespunzător din fiecare grupă este numărul index b . În exemplul nostru, acesta va fi primul element.

Dacă expresia este 3n+2 , elementele sunt grupate în grupuri de trei, iar al doilea element din fiecare grup se potrivește cu expresia.

Dacă b este negativ, elementul corespunzător din grup este elementul de la indicele b . Dar se numără în sens invers față de indicele 1. În acest caz, elementul corespunzător nu va aparține acestui grup, ci grupului precedent.

Cuvântul cheie par din al n-lea copil CSS poate fi exprimat ca 2n. În acest caz, nu avem o valoare pentru b, deci fiecare element al grupului cu indice a este selectat; 2n selectează fiecare al doilea element, 3n selectează fiecare al treilea, 4n selectează fiecare al patrulea și așa mai departe.

Personal, mi se pare foarte confuz conceptul de a împărți elementele copil în grupuri și de a găsi un index de potrivire pentru fiecare grup. Deși exact așa le descrie specificația selectoarelor CSS.

Prefer conceptul de căutare pentru fiecare al n-lea element - fiecare al 2-lea, al 3-lea sau al 4-lea etc. Și atunci îmi este mai ușor să-mi imaginez că a doua parte a expresiei este o compensare.

În cazul lui 2n+1 citesc această expresie după cum urmează: " Găsiți fiecare al doilea element și mutați selecția în jos cu 1».

Dacă expresia este 3n-5, se va citi astfel: " Găsiți fiecare al treilea element și mutați selecția în sus cu 5».

Alți selectori: al nth-child

:nth-child are o pseudo-clasă corespunzătoare :nth-last-child care face opusul.

li:nth-last-child(3n) începe de la ultimul copil și funcționează înapoi, potrivind fiecare al treilea element de la sfârșitul listei.

Această pseudo-clasă este mai puțin frecventă. Cu toate acestea, este adesea necesar să alegeți primul sau ultimul element copil. Acest lucru se poate face cu :nth-child(1) sau :nth-last-child(1) , dar această metodă nu este la fel de comună ca pseudoclasele :first-child și :last-child. Cu toate acestea, numai :first-child funcționează în IE8, dar selectoarele :last-child și :nth nu.

:nth-of-type

Ceea ce mă deranjează adesea este că pseudo-clasa copil CSS a n-a selectează elementele copil după index și nu ia în considerare tipul de element.

Luați în considerare următorul exemplu.

lorem ipsum;

Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;

Nunc sed turpis. Donec posuere vulputate arcu;

Există o secțiune cu titlu, subtitlu și mai multe paragrafe. Vreau să fac primul paragraf să iasă puțin în evidență cu o dimensiune mai mare a fontului, de 1,5 em.

Puteți încerca să utilizați secțiunea p:first-child, deoarece trebuie să adăugați un stil suplimentar la primul paragraf din acea secțiune. Dar acest lucru nu va funcționa deoarece primul element copil al secțiunii este h1 . În acest caz, trebuie să utilizați selectorul :first-of-type.

Există întreaga linie Selectorii pentru acest tip sunt :first-of-type , :last-of-type , :nth-of-type și :nth-last-of-type . Se comportă la fel ca :nth-child , dar selectează a n-a instanță de elemente de un anumit tip.