Fiecare al treilea element CSS. Pseudo-clase CSS: al n-lea copil și al n-lea de tip. Semnificație și aplicare
Pseudo-clasa: nth-child este folosită pentru a stiliza elemente pe baza numerotării din arborele elementelor.
Denumiri
| Descriere | Exemplu | |
|---|---|---|
| <тип> | Indică tipul valorii. | <размер> |
| A&&B | Valorile trebuie afișate în ordinea afișată. | <размер> && <цвет> |
| A | B | Indică faptul că trebuie selectată doar una dintre valorile sugerate (A sau B). | normal | litere mici |
| A || B | Fiecare valoare poate fi utilizată singură sau împreună cu altele în orice ordine. | lățime || numara |
| Valorile grupurilor. | [cultură || traversa] | |
| * | Repetați zero sau de mai multe ori. | [,<время>]* |
| + | Repetați una sau mai multe ori. | <число>+ |
| ? | Tipul, cuvântul sau grupul specificat este opțional. | medalion? |
| (A, B) | Repetați cel puțin A, dar nu mai mult de B ori. | <радиус>{1,4} |
| # | Repetați una sau mai multe ori, separate prin virgule. | <время># |
Valorile
impare Toate numerele de element impare. chiar Toate numerele de elemente pare.<число>Numărul ordinal al copilului în raport cu părintele său. Numerotarea începe de la 1, acesta va fi primul articol din listă.<выражение>Este specificat ca ± b, unde a și b sunt numere întregi, iar n este un contor care ia automat valoarea 0, 1, 2 ...
Dacă a este egal cu zero, atunci nu este scris și înregistrarea este scurtată la b. Dacă b este egal cu zero, atunci nu este specificat și expresia este scrisă sub forma an. a și b pot fi numere negative, caz în care semnul plus se schimbă în minus, de exemplu: 5n-1.
Utilizând valori negative pentru a și b, unele rezultate pot fi, de asemenea, negative sau zero. Cu toate acestea, articolele sunt afectate doar de valori pozitive datorită faptului că numerotarea articolelor începe de la 1.
Masa 1 listează câteva expresii și cuvinte cheie posibile și indică, de asemenea, numerele articolelor care vor fi utilizate.
| Sens | Numerele articolelor | Descriere |
|---|---|---|
| 1 | 1 | Primul element este sinonim cu aliasul: primul copil. |
| 5 | 5 | Al cincilea element. |
| 2n | 2, 4, 6, 8, 10,… | Toate elementele pare, analog cu valoarea egală. |
| 2n + 1 | 1, 3, 5, 7, 9,… | Toate elementele impare, analog cu valoarea impară. |
| 3n | 3, 6, 9, 12, 15,… | Fiecare al treilea element. |
| 3n + 2 | 2, 5, 8, 11, 14,… | Fiecare al treilea element, începând cu al doilea. |
| n + 4 | 4, 5, 6, 7, 8,… | Toate elementele, cu excepția primelor trei. |
| -n + 3 | 3, 2, 1 | Primele trei elemente. |
| 5n-2 | 3, 8, 13, 18, 23,… | — |
| chiar | 2, 4, 6, 8, 10,… | Toate elementele uniforme. |
| ciudat | 1, 3, 5, 7, 9,… | Toate articolele ciudate. |
Este permisă combinarea a două: pseudo-clase n-copil pentru a selecta o gamă de elemente. Toate articolele de la 2 la 5 vor fi selectate aici.
: nth-child (n + 2): nth-child (-n + 5) (...)
Exemplu
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Ulei | 16 | 34 | 62 | 74 | 57 |
| Aur | 4 | 69 | 72 | 56 | 47 |
| Lemn | 7 | 73 | 79 | 34 | 86 |
| Pietre | 23 | 34 | 88 | 53 | 103 |
V acest exemplu Pseudo-clasa: nth-child este folosită pentru a schimba stilul primului rând al unui tabel, precum și pentru a colora toate rândurile pare (Figura 1).
Orez. 1. Aplicarea pseudo-clasei: nth-child la rândurile de tabel
Specificație
Fiecare specificație trece prin mai multe etape de aprobare.
- Recomandare - Această specificație este aprobată de W3C și recomandată ca standard.
- Recomandarea candidatului ( Posibilă recomandare) - grupul responsabil pentru standard este mulțumit că își îndeplinește obiectivele, dar este nevoie de ajutorul comunității de dezvoltatori pentru implementarea standardului.
- Recomandarea propusă ( Recomandare sugerată) - În acest moment, documentul este prezentat Consiliului consultativ al W3C pentru aprobare finală.
- Proiect de lucru - O versiune mai matură a proiectului după discuție și revizuire pentru revizuirea comunității.
- Proiectul editorului ( Proiect editorial) - o versiune preliminară a standardului după editare de către editorii de proiect.
- Proiect ( Proiect de caiet de sarcini) este prima versiune a standardului.
Pseudo-clasele pot fi folosite pentru a selecta un anumit element dintr-o listă. În acest tutorial, vom vorbi despre: pseudo-clasa a n-a copilului, ce puteți crea cu această pseudo-clasă și cum poate fi utilă. Pseudo-clasa: nth-child vă permite să selectați un grup de elemente cu proprietăți comune. Este cel mai frecvent utilizat pentru a selecta elemente impare sau pare dintr-un grup. Este adesea folosit pentru a face masa să arate ca o zebră prin atribuirea diferitelor culori de fundal rândurilor impare și pare.
O altă pseudo-clasă: nth-child vă permite să împărțiți elemente cu o proprietate comună în grupuri și apoi să selectați un element specific din fiecare grup folosind următoarea sintaxă:
Aici A determină numărul de elemente din grup și b determină ce element din grup va fi selectat.
dacă se folosește valoarea 2n + 1, atunci elementele vor fi împărțite în grupuri de două, iar primele elemente ale fiecărui grup vor fi selectate, adică elementele cu un număr ordinal impar. Dacă folosim valoarea 2n + 2, atunci elementele vor fi din nou împărțite în grupuri de două, dar acum vor fi selectate al doilea element al fiecărui grup, adică elemente cu un număr ordinal.
De exemplu, pentru a înțelege: pseudo-clasa a n-a copilului, o vom folosi pentru a selecta fiecare al patrulea element, adică al patrulea, al optulea, al doisprezecelea, al șaisprezecelea etc. Pentru a face acest lucru, împărțiți elementele în grupuri de patru și apoi selectați fiecare al patrulea element.
Mai jos este o listă cu zece elemente și vom folosi pseudo-clasele: nth-child ,: first-child și: last-child pentru a selecta elementele pe care dorim să le evidențiem.
Folosind pseudo-clasa CSS: nth-child pentru a selecta un singur element
Setând pseudo-clasa: nth-child la un număr, puteți alege la ce copil al grupului să se refere:
Elementul 1
Elementul 2
Elementul 3
Elementul 4
Elementul 5
Elementul 6
Elementul 7
Elementul 8
Elementul 9
Elementul 10
Utilizarea pseudo-clasei CSS: nth-child pentru a selecta toate elementele, cu excepția primelor cinci
Dacă setați pseudo-clasa: nth-child la o valoare a formularului n + număr, puteți selecta toate elementele începând cu elementul cu acest număr ordinal:
Elementul 1
Elementul 2
Elementul 3
Elementul 4
Elementul 5
Elementul 6
Elementul 7
Elementul 8
Elementul 9
Elementul 10
Utilizarea pseudo-clasei CSS: nth-child pentru a selecta doar primele cinci elemente
Când stabilim pseudo-clasa: nth-child la negativ n + număr, selectăm toate elementele care sunt înaintea elementului cu acest ordinal:
Elementul 1
Elementul 2
Elementul 3
Elementul 4
Elementul 5
Elementul 6
Elementul 7
Elementul 8
Elementul 9
Elementul 10
Folosind pseudo-clasa CSS: nth-child pentru a selecta fiecare al treilea element
Pseudo-clasa: nth-child poate fi utilizată pentru a selecta o secvență de elemente specificând câte elemente sunt în secvență și numărul secvenței elementului dorit. Dacă setați valoarea 3n + 1, fiecare al treilea element va fi selectat, începând cu primul:
Elementul 1
Elementul 2
Elementul 3
Elementul 4
Elementul 5
Elementul 6
Elementul 7
Elementul 8
Elementul 9
Elementul 10
Utilizarea pseudo-clasei CSS: nth-child pentru a selecta doar elemente impare
Puteți seta: pseudo-clasa copilul al n-lea la impar (impar) pentru a selecta toate articolele impare. Adică primul, al treilea, al cincilea, al șaptelea, al nouălea elemente etc. Este foarte convenabil să setați culori pentru rândurile adiacente ale mesei.
Elementul 1
Elementul 2
Elementul 3
Elementul 4
Elementul 5
Elementul 6
Elementul 7
Elementul 8
Elementul 9
Elementul 10
Utilizarea pseudo-clasei CSS: nth-child pentru a selecta doar elemente pare
Acest exemplu arată același lucru ca și ultimul, dar de această dată sunt selectate toate elementele cu numere secvențiale pare. Adică al doilea, al patrulea, al șaselea, al optulea, al zecelea elemente etc.:
Elementul 1
Elementul 2
Elementul 3
Elementul 4
Elementul 5
Elementul 6
Elementul 7
Elementul 8
Elementul 9
Elementul 10
Utilizarea pseudo-clasei CSS: first-child pentru a selecta primul element
O altă pseudo-clasă: primul-copil va selecta primul element:
Elementul 1
Elementul 2
Elementul 3
Elementul 4
Elementul 5
Elementul 6
Elementul 7
Elementul 8
Elementul 9
Elementul 10
Utilizarea pseudo-clasei CSS: last-child pentru a selecta ultimul element
În plus față de pseudo-clasa: first-child, există și pseudo-classul: last-child, care va selecta ultimul element dintr-un grup de elemente:
Elementul 1
Elementul 2
Elementul 3
Elementul 4
Elementul 5
Elementul 6
Elementul 7
Elementul 8
Elementul 9
Elementul 10
Folosind pseudo-clasa CSS: nth-last-child pentru a selecta penultimul element
Puteți utiliza, de asemenea, pseudo-clasa: nth-last-child, care combină capacitățile pseudo-claselor: last-child și: nth-child pentru a începe numărarea de la sfârșit. Adică, puteți selecta un element numărând numerele ordinale de la sfârșitul grupului, de exemplu, într-un grup de zece elemente, puteți selecta al doilea element de la sfârșit:
Elementul 1
Elementul 2
Elementul 3
Elementul 4
Elementul 5
Elementul 6
Elementul 7
Elementul 8
Elementul 9
Elementul 10
Verificați capacitățile pseudo-clasei: nth-child folosind „nth-child Constructor”.
Uneori, când proiectați pagini, doriți să „automatizați” puțin stilurile CSS.
Una dintre problemele cu care vă puteți confrunta: cum să selectați toate elementele pare ale unei liste, tabele, blocuri și alte elemente de pe o pagină web.
Desigur, puteți atribui o anumită clasă fiecărui element egal, dar acest lucru este bun atunci când nu există prea multe elemente. Nu este întotdeauna posibil și nu întotdeauna de dorit să adăugați toate acestea manual.
Aș dori să vorbesc despre o metodă care se bazează pe utilizarea unei pseudo-clase al n-lea copil.
Această pseudo-clasă a fost introdusă în CSS3, deci rețineți că în browserele mai vechi este posibil să nu funcționeze. Dar, oportunitățile care apar atunci când îl folosești sunt foarte impresionante.
O modalitate de a utiliza această pseudo-clasă în practică este de a selecta toate elementele cu număr par care se află în arborele documentului HTML.
Există mai multe opțiuni pentru modul în care acest lucru poate fi implementat. Să le aruncăm o privire.
Opțiunea 1. Folosiți parametrul chiar.
Să presupunem că avem o listă ca aceasta:
- Elementul 1
- Elementul 2
- Elementul 3
- Elementul 4
- Elementul 5
- Elementul 6
- Elementul 7
- Elementul 8
- Elementul 9
- Elementul 10
Pentru a evidenția în roșu toate elementele pare din această listă, trebuie să adăugați un stil CSS:
Ul li: nth-child (even) (culoare: # F00;)
Ca rezultat, va apărea următoarea imagine.
Even este un cuvânt cheie care înseamnă că vor fi selectate chiar și elemente.
Soluție frumoasă, nu-i așa? Doar o linie de stiluri CSS.
Opțiunea 2. Utilizați parametrul 2n.
Această opțiune poate fi utilizată ca alternativă. O valoare de 2n înseamnă că fiecare al doilea element va fi selectat, iar fiecare al doilea element este, de fapt, egal.
Acesta este modul în care poate fi folosit pentru tabele.
| Coloana 1 | Coloana 2 &. t; td> 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
Și stiluri CSS
Tr: nth-child (2n) (culoare: # F00;)
Textul din fiecare element tr numerotat a devenit roșu.
webgyry.info
Suport pentru browser
| 12.0+ | 9.0+ | 3.5+ | 4.0+ | 9.6+ | 3.2+ |
Descriere
Pseudo-clasa: nth-child () selectează elemente copil în funcție de poziția lor (ordinal) în cadrul elementului părinte.
Sintaxă
: n-copil (număr) (proprietăți)Un argument este indicat între paranteze, care poate fi un număr, un cuvânt cheie sau o expresie numerică sub forma an + b, unde a și b sunt numere întregi, iar n este un contor care acceptă automat valori întregi non-negative din 0 și mai mult: 0, 1, 2, 3,….
Folosind un număr, puteți specifica ordinalul specific al elementului copil căruia doriți să-i aplicați stilul:
/ * selectați al treilea element din listă * / ul li: nth-child (3) (culoare: roșu;)
Există două posibile Cuvinte cheie: impar (impar) și par (par). Acestea vă permit să selectați copii par sau impari:
/ * selectați toate rândurile din tabel cu un număr de ordine impar * / tr: n-copil (impar) td (fundal-culoare: argintiu;)
Partea „an” a expresiei calculează pozițiile elementelor secundare conform următoarei formule: număr * n, deoarece n este un contor, valorile numerice sunt înlocuite automat în timpul calculului, începând de la 0 și apoi valoarea crește de fiecare dată cu unul mai mult decât precedentul: 0,1,2, 3 etc. Să presupunem că trebuie să selectăm fiecare al treilea element din listă, pentru aceasta trebuie să scriem doar 3n:
ul li: nth-child (3n) (culoare: roșu;)
3 * 0 = 0 - nimic selectat
3 * 1 = al treilea punct
3 * 2 = punctul 6
etc.
Partea „b” a expresiei vă permite să specificați din ce poziție ar trebui să înceapă selecția elementelor. Să presupunem că trebuie să selectăm fiecare al treilea element din listă începând de la al doilea element din listă, pentru aceasta trebuie să scriem urmând expresia 3n + 2:
Ul li: nth-child (3n + 2) (culoare: roșu;)
Astfel, elementele listei vor fi selectate conform următoarei formule:
(3 * 0) + 2 = al doilea punct
(3 * 1) + 2 = punctul 5
(3 * 2) + 2 = punctul 8
etc.
Exemplu:
| text |
| text |
| text |
| text |
| text |
| text |
| text |
| text |
| text |
| text |
Rezultatul acestui exemplu:
puzzleweb.ru
Suport pentru browser
Selector: al n-lea copil
este unul dintre puținele selectoare CSS care este aproape complet acceptat în browserele moderne și este complet neacceptat în IE, nici măcar IE8. Prin urmare, atunci când vine vorba de utilizarea acestuia, iar rezultatul final este obținut conform tehnologiei de îmbunătățire progresivă - îl puteți folosi în siguranță pentru unele elemente de design, cum ar fi rândurile de masă de colorat. Cu toate acestea, nu ar trebui să-l utilizați în cazuri mai grave. De exemplu, mizați-vă pe acesta în aspectul site-ului dvs. sau eliminați marja dreaptă din fiecare al treilea bloc dintr-o grilă trei câte trei, astfel încât să se potrivească la rând.
Mântuirea aici este biblioteca jQuery, care implementează suport pentru toți selectorii CSS, inclusiv: al n-lea copil, chiar și în Internet Explorer.
web-standards.ru
Semnificație și aplicare
Pseudo-clasa : al n-lea copil () vă permite să selectați elemente copil în interiorul elementului părinte pe baza plasării lor (ordinal).
Utilizarea acestei pseudo-clase este larg răspândită, vă permite să alternați stiluri de rânduri în tabele, liste, stilizați o combinație de copii etc.
Sintaxa CSS:
: al n-lea copil (număr | cuvânt cheie | formulă)(bloc publicitar;)Exemplu de utilizare
Styling după numărul de serie
Să vedem un exemplu în care vă confruntați cu sarcina de a schimba stilul pentru toate elementele care sunt evidențiate în portocaliu în imagine:
Ce au în comun elementele evidențiate în imagine? Ceea ce au în comun este că sunt evidențiate în portocaliu. Amuzant? Nu cred. Au încă ceva în comun, elementele
poate fi, de asemenea, numărat, iar numărul său de ordine va fi al treilea (al treilea copil al părintelui său ). Pentru a stiliza aceste elemente, trebuie să folosim pseudo-clasa : al n-lea copil.
Să trecem la un exemplu:
Primul titlu h2 al etichetei corpului
- unu
- Două
- Trei
Al doilea titlu h2 al etichetei corpului
Prima rubrică h2 a etichetei articolului
- unu
- Două
- Trei
: al n-lea copil am stilizat elementele
și
Rezultatul exemplului nostru:
Stilul cuvintelor cheie
Ca valoare pseudo-clasă : al n-lea copil () pot exista nu numai numărul ordinal al elementelor copil care trebuie stilate, ci și cuvinte cheie care pot defini un întreg grup de elemente. Puteți utiliza două valori ca cuvânt cheie:
- par (elemente pare)
- ciudat (elemente ciudate)
Elementele de stil folosind cuvinte cheie sunt foarte versatile, deoarece puteți selecta și stiliza cu ușurință copiii impari sau chiar în documentul dvs.
De exemplu, să creăm două tabele simple cu clase de stil diferite și să vedem clar diferența în aplicarea valorilor cuvintelor cheie pseudo-clasă. : al n-lea copil pentru elementul HTML
| 1 linie | Poziţie | Cantitate |
|---|---|---|
| 2 linii | ||
| 3 linii | ||
| 4 linii | ||
| 5 linii |
| 1 linie | Poziţie | Cantitate |
|---|---|---|
| 2 linii | ||
| 3 linii | ||
| 4 linii | ||
| 5 linii |
În acest exemplu folosind pseudo-clasa : al n-lea copil () ne-am stilat chiar rândurile primului tabel (elemente
Coafare cu o formulă matematică simplă
Pseudo-clasa : al n-lea copil () vă permite să selectați nu numai elemente pare, impare sau copil cu un număr ordinal specific, 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: al n-lea copil (4n + 2)- 4n- fiecare al patrulea element.
- 2
Puteți utiliza valori cu un semn de scădere în formule, dar acest lucru nu este de obicei necesar:
td: n-copil (4n-1)(fundal-culoare: albastru deschis; / * setați culoarea de fundal * /)Acest selector înseamnă că fiecare a patra celulă din tabel (
- 4n- fiecare al patrulea element.
- -1 - cu ce element să începeți.
Să aruncăm o privire 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 stilat fiecare a patra celulă din tabel (
basicweb.ru
Cum funcționează selectorul CSS al n-lea copil
Există un selector în CSS, pentru a fi mai precis, un pseudo-selector numit nth-child. Un exemplu de utilizare a acestuia:
Ul li: nth-child (3n + 3) (culoare: #ccc;)
CSS de mai sus face următoarele: Aplicați stiluri la fiecare al treilea element din lista de marcatori. Și anume 3, 6, 9, 12 etc. Dar cum funcționează? Și, de asemenea, cum puteți beneficia de a folosi al n-lea copil?
Punctul principal este expresia dintre paranteze. nth-child acceptă două cuvinte cheie: chiar(chiar) și ciudat(ciudat). Sensul lor este absolut clar. Chiar selectează elemente pare (2, 4, 6), impare selectează cele impare (1, 3, 5).
După cum se arată în exemplul de mai sus, al n-lea copil poate gestiona expresii. Care este cea mai simplă expresie posibilă? Doar un număr. Dacă scrieți un număr între paranteze, atunci va fi selectat un singur element. De exemplu, să selectăm al cincilea element din listă:
Ul li: nth-child (5) (culoare: #ccc;)
Să ne întoarcem la primul nostru exemplu, în care am folosit expresia (3n + 3). Cum lucrează? De ce alege fiecare al treilea element? Punctul întreg este în variabila n. Acceptă valori întregi de la zero și mai mult. Să aruncăm o privire mai atentă:
(3 x 0) + 3 = 3 = 3 element (3 x 1) + 3 = 6 = 6 element (3 x 2) + 3 = 9 = 9 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 = 3 element (2 x 2) + 1 = 5 = 5 element, etc.
Ca rezultat, am obținut același lucru ca și în cazul impare, deci nu este nevoie să folosim o astfel de expresie des. Mai mult, primul nostru exemplu poate fi, de asemenea, simplificat și utilizat în loc de expresia originală (3n + 3), expresia (3n):
(3 x 0) + 0 = 0 = fără potrivire (3 x 1) + 0 = 3 = elementul 3 (3 x 2) + 0 = 6 = elementul 6 etc.
După cum puteți vedea, rezultatul este același, dar nu este necesar 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 treilea element (4 x 2) - 1 = 7 = al 7-lea element etc.
Utilizarea valorilor negative pentru coeficientul la n pare puțin ciudat, deoarece dacă rezultatul este negativ, nu se va găsi nicio potrivire. Va trebui să schimbați constant expresia pentru a adăuga elemente pozitive. După cum sa dovedit, această abordare este foarte convenabilă pentru selectarea primelor n elemente. Luați în considerare 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 = fără potrivire
Compatibilitate cross-browser
nth-child este unul dintre acele atribute nefericite care este complet încrucișat, cu excepția zero absolut din IE, chiar și a 8-a versiune. Prin urmare, atunci când vine vorba de utilizarea acestuia, dacă rezultatul așteptat este într-un fel un efect vizual (de exemplu, colorarea rândurilor unui anumit tabel), atunci aceasta este o abordare ideală. Dar probabil 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 ar trebui să vă faceți griji, deoarece jQuery funcționează chiar și în Internet Explorer.
Și, în sfârșit
Puteți juca cu diferite expresii selector pe pagina de exemplu.
www.css-tricks.ru
Valorile
| Sens | Descriere |
|---|---|
| Număr | Un număr pozitiv începând de la 1. Specifică numărul elementului la care dorim să ne referim. Articolele sunt numerotate începând cu 1. |
| ciudat | Obiecte ciudate. |
| chiar | Chiar și elemente. |
| Expresie | Puteți scrie expresii speciale cu litera n, care denotă toate numerele întregi din zero (nu de la unul!) catre infinit. Deci, 2n înseamnă toate numerele pare (începând de la al doilea). Cum să înțelegem asta? Înlocuiți în n succesiv numere de la 0 și așa mai departe: dacă n = 0, atunci 2n va da 0 - nu există un astfel de element ( numerotarea elementelor 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, acesta va fi fiecare al treilea element (începând de la al treilea!) Și așa mai departe. |
Exemple de
Exemplu
În acest exemplu, vom face li roșu, 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 al treilea):
Rezultatul executării codului:
Exemplu
În selector, puteți specifica o serie de elemente. Să presupunem că aveți o listă de 20 de articole și doriți să selectați articolele 7-14, inclusiv. Puteți face acest lucru:
Rezultatul executării codului:
cod.mu
Sintaxă
Pseudo-clasa copilului al n-lea este specificată cu un singur argument, care reprezintă modelul pentru elementele potrivite.
Valorile cuvintelor cheie
impare Reprezintă elemente a căror poziție numerică într-o serie de frați este impar: 1, 3, 5 etc. chiar Reprezintă elemente a căror poziție numerică într-o serie de frați este pare: 2, 4, 6 etc.Notatie functionala
Sintaxa formală
: al n-lea copil (Unde
Unde
Unde
Unde
Există un selector în CSS, pentru a fi mai precis, un pseudo-selector numit nth-child. Un exemplu de utilizare a acestuia:
Ul li: nth-child (3n + 3) (culoare: #ccc;)
CSS de mai sus face următoarele: Aplicați stiluri la fiecare al treilea element din lista de marcatori. Și anume 3, 6, 9, 12 etc. Dar cum funcționează? Și, de asemenea, cum puteți beneficia de a folosi al n-lea copil?
Punctul principal este expresia dintre paranteze. nth-child acceptă două cuvinte cheie: chiar(chiar) și ciudat(ciudat). Sensul lor este absolut clar. Chiar selectează elemente pare (2, 4, 6), impare selectează cele impare (1, 3, 5).
După cum se arată în exemplul de mai sus, al n-lea copil poate gestiona expresii. Care este cea mai simplă expresie posibilă? Doar un număr. Dacă scrieți un număr între paranteze, atunci va fi selectat un singur element. De exemplu, să selectăm al cincilea element din listă:
Ul li: nth-child (5) (culoare: #ccc;)
Să ne întoarcem la primul nostru exemplu, în care am folosit expresia (3n + 3). Cum lucrează? De ce alege fiecare al treilea element? Punctul întreg este în variabila n. Acceptă valori întregi de la zero și mai mult. Să aruncăm o privire mai atentă:
(3 x 0) + 3 = 3 = 3 element (3 x 1) + 3 = 6 = 6 element (3 x 2) + 3 = 9 = 9 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 = 3 element (2 x 2) + 1 = 5 = 5 element, etc.
Ca rezultat, am obținut același lucru ca și în cazul impare, deci nu este nevoie să folosim o astfel de expresie des. Mai mult, primul nostru exemplu poate fi, de asemenea, simplificat și utilizat în loc de expresia originală (3n + 3), expresia (3n):
(3 x 0) + 0 = 0 = fără potrivire (3 x 1) + 0 = 3 = elementul 3 (3 x 2) + 0 = 6 = elementul 6 etc.
După cum puteți vedea, rezultatul este același, dar nu este necesar 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 = 3 element (4 x 2) - 1 = 7 = 7 element, etc.
Utilizarea valorilor negative pentru coeficientul la n pare puțin ciudat, deoarece dacă rezultatul este negativ, nu se va găsi nicio potrivire. Va trebui să schimbați constant expresia pentru a adăuga elemente pozitive. După cum sa dovedit, această abordare este foarte convenabilă pentru selectarea primelor n elemente. Luați în considerare 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 = fără potrivire
Compatibilitate cross-browser
nth-child este unul dintre acele atribute nefericite care este complet încrucișat, cu excepția zero absolut în IE, chiar și a 8-a versiune. Prin urmare, atunci când vine vorba de utilizarea acestuia, dacă rezultatul așteptat este într-un fel un efect vizual (de exemplu, colorarea rândurilor unui anumit tabel), atunci aceasta este o abordare ideală. Dar probabil 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 ar trebui să vă faceți griji, deoarece jQuery funcționează chiar și în Internet Explorer.
Și, în sfârșit
Puteți juca cu diferite expresii selector activate
Descriere
Pseudo-clasa: nth-child este folosită pentru a stiliza elemente pe baza numerotării din arborele elementelor.
Sintaxă
element: al n-lea copil (impar | par |<число> | <выражение>) {...}
Valorile
impare Toate numerele de articole impare. chiar Toate numerele de elemente pare. number Numărul ordinal al copilului în raport cu părintele său. Numerotarea începe de la 1, acesta va fi primul element din listă. expresie Specificat ca + b, unde a și b sunt numere întregi și n este un contor care ia automat valoarea 0, 1, 2 ...Dacă a este egal cu zero, atunci nu este scris și înregistrarea este scurtată la b. Dacă b este egal cu zero, atunci nu este specificat și expresia este scrisă sub forma an. a și b pot fi numere negative, caz în care semnul plus se schimbă în minus, de exemplu: 5n-1.
Utilizând valori negative pentru a și b, unele rezultate pot fi, de asemenea, negative sau zero. Cu toate acestea, articolele sunt afectate doar de valori pozitive datorită faptului că numerotarea articolelor începe de la 1.
Masa 1 listează câteva expresii și cuvinte cheie posibile și indică, de asemenea, numerele articolelor care 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 |
| Lemn | 7 | 73 | 79 | 34 | 86 |
| Pietre | 23 | 34 | 88 | 53 | 103 |
În acest exemplu, pseudo-clasa: nth-child este utilizată pentru a schimba stilul primului rând al tabelului, precum și pentru a colora toate rândurile pare (Figura 1).
Există un astfel de selector, mai exact o pseudo-clasă numită: al n-lea copil. Iată un exemplu de utilizare:
UL LI: n-copil (3n + 3) (culoare: #CCC;)
Ce face CSS de mai sus? Selectează fiecare al treilea element din lista cu marcatori: acesta este al treilea, al șaselea, al nouălea, al 12-lea etc. Să vedem exact cum funcționează această expresie și ce se mai poate face cu: al n-lea copil.
Totul depinde de ceea ce este între paranteze. Selectorul: nth-child acceptă două cuvinte cheie, pare și impar. Totul este simplu: chiar selectează elemente pare, cum ar fi al 2-lea, al 4-lea, al 6-lea, etc.
Așa cum puteți vedea în primul exemplu ,: nth-child acceptă ș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 articol 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 articol? Întregul truc constă în înțelegerea variabilei n și a ecuației algebrice reduse. Gândiți-vă la n ca la un set de numere întregi bazate pe zero. Apoi completați ecuația. Deci 3n este 3 × n, iar întreaga ecuație împreună este (3 × n) +3. Acum, substituind numere mai mari sau egale cu zero în loc de n, obținem:
- (3 × 0) + 3 = 3 = al treilea element
- (3 × 1) + 3 = 6 = elementul 6
- (3 × 2) + 3 = 9 = al 9-lea element etc.
Ce zici de: al n-lea copil (2n + 1)?
- (2 × 0) + 1 = 1 = primul element
- (2 × 1) + 1 = 3 = al treilea element
- (2 × 2) + 1 = 5 = elementul 5 etc.
Deci oprește-te! Este la fel ca și ciudat. Atunci poate că nu ar trebui să folosiți această expresie? Dar oare nu complicăm prea mult primul nostru exemplu în acest caz? Ce se întâmplă dacă în loc de 3n + 3 scriem 3n + 0 sau chiar mai simplu 3n?
- (3 × 0) = 0 = nimic
- (3 × 1) = 3 = al treilea element
- (3 × 2) = 6 = al 6-lea element
- (3 × 3) = 9 = al 9-lea element etc.
Deci, după cum puteți vedea, rezultatul este același, ceea ce înseamnă că nu este nevoie de +3. Putem folosi și valori n negative, precum și scăderea în ecuații. De exemplu, 4n-1:
- (4 × 0) - 1 = –1 = nimic
- (4 × 1) - 1 = 3 = al treilea element
- (4 × 2) - 1 = 7 = al 7-lea element etc.
Utilizarea -n poate părea ciudată, deoarece dacă rezultatul final este negativ, atunci nu vor fi incluse elemente în selecție. Dar dacă completăm ecuația și facem din nou rezultatul pozitiv, atunci proba se va dovedi a fi destul de interesantă: cu ea va fi posibil să obțineți primele n elemente, de exemplu, astfel: -n + 3:
- –0 + 3 = 3 = al treilea element
- –1 + 3 = 2 = al doilea element
- –2 + 3 = 1 = primul element
- –3 + 3 = 0 = nimic etc.
SitePoint are o referință drăguță cu un semn drăguț 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ținele selectoare CSS care este aproape complet acceptat în browserele moderne și este complet neacceptat în IE, nici măcar IE8. Prin urmare, atunci când vine vorba de utilizarea acestuia, iar rezultatul final este obținut conform tehnologiei de îmbunătățire progresivă - îl puteți folosi în siguranță pentru unele elemente de design, cum ar fi rândurile de masă de colorat. Cu toate acestea, nu ar trebui să-l utilizați în cazuri mai grave. De exemplu, mizați-vă pe acesta în aspectul site-ului dvs. sau eliminați marja dreaptă din fiecare al treilea bloc dintr-o grilă trei câte trei, astfel încât să se potrivească la rând.