Înțelegerea selectorului CSS :nth-child().

La fel ca toți selectoarele CSS, puteți utiliza :nth-child() pentru a identifica elementele dintr-o pagină web și pentru a le aplica stiluri. Dar acest selector vă permite să restrângeți un set de frați în funcție de poziția lor relativă.

Selectorul acceptă câteva cuvinte cheie de bază pentru cazuri obișnuite, dar oferă și o sintaxă puternică de potrivire a modelelor. Folosind-o, puteți selecta elemente bazate pe modele obișnuite, repetate sau definiții mai complexe, în funcție de nevoile dvs.

Sintaxa selectorului :nth-child().

Ca Selector de pseudo-clase CSS, sintaxa :nth-child() diferă de alți selectori. Este nevoie de un argument ca model pentru potrivirea elementelor dintr-un set de frați:

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

Accentul principal este pus pe argumentele din paranteze. Aceste argumente definesc subsetul de elemente de selectat.

Utilizarea valorilor cuvintelor cheie pentru cazuri obișnuite

Acest selector poate găzdui două valori ale cuvintelor cheie: ciudat și chiar. Sunt deosebit de utile pentru stilizarea rândurilor alternative dintr-un tabel.

O listă ordonată simplă este un alt exemplu bun de utilizare a acestor valori ale cuvintelor cheie:

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

Folosind :al-al-lea copil (impar) selector, puteți schimba culoarea fiecărui element alternativ:

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

Elementele încep la indexul 1, astfel încât primul articol va apărea roșu, apoi al treilea și așa mai departe:

Notație funcțională pentru mai multă flexibilitate

Puteți utiliza un singur întreg pentru a selecta un element individual, astfel:

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

În acest caz, selectorul se potrivește doar cu al patrulea element din listă:

Această sintaxă este un caz special al sintaxei funcționale mai generale, care selectează elementele care se potrivesc cu un model dat. Această sintaxă este:

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

În această notație, A este dimensiunea pasului. Aceasta înseamnă de câte ori se mișcă selectorul pentru a selecta următorul articol. Vă permite să selectați fiecare alt articol, fiecare al treilea articol etc. B este punctul de plecare de unde începe selecția.

De exemplu, luați argumentul 3n+1:

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

Aceasta va începe selecția la primul articol și va continua cu fiecare al treilea articol după aceea:

Compară asta cu expresia 3n+2:

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

Aceasta încă selectează fiecare al treilea element, dar acum începe de la al doilea element din listă:

Un alt exemplu interesant este :nth-child (n+3):

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

Acesta va selecta fiecare element (n), începând cu al treilea (+3). Va arăta astfel:

De asemenea, puteți utiliza scăderea pentru a obține anumite rezultate:

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

Acest exemplu selectează în continuare fiecare al treilea element, dar începe de la „primul minus”. De fapt, aceasta înseamnă că va selecta al doilea element din listă, apoi al cincilea și așa mai departe:

De Sintaxă

De asemenea, puteți utiliza cuvântul cheie de urmat de a selector ca argument în selectorul :nth-child(). Această sintaxă vă permite să restrângeți elementele posibile din care modelul obișnuit le selectează.

De exemplu, imaginați-vă că marcajul dvs. este mai complicat decât originalul:

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

Acum, utilizați :nth-child pentru a selecta elementele pare din setul celor cu o anumită clasă:

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

Observați cum numai elementele aldine cu numere pare sunt roșii:

Luați în considerare, de asemenea, cum diferă acest lucru li.new: al-n-lea copil (chiar) care vizează .elemente noi, dar numai dacă sunt pare. Acestea ar fi punctele 2 și 6 din exemplul de mai sus.

Lucrul cu selectorul :nth-child().

Puteți realiza modele unice folosind selectorul :nth-child(). Puteți crea site-uri web colorate și puteți evidenția rânduri și coloane în tabelele de date. Combinarea acestuia cu alte selectoare CSS vă va ajuta să creați machete și modele complexe.