: al n-lea copil - CSS-Tricks

Anonim

:nth-childSelector vă permite să selectați unul sau mai multe elemente bazate pe ordinea lor sursă, conform unei formule.

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

Acesta este definit în specificațiile de nivel 3 CSS Selectors ca o „pseudo-clasă structurală”, ceea ce înseamnă că este folosit pentru stilizarea conținutului pe baza relației sale cu elementele părinte și frate.

Să presupunem că construim o grilă CSS și dorim să eliminăm marja pe fiecare al patrulea modul de grilă. Iată codul HTML:

 One Two Three Four Five

În loc să adăugăm o clasă la fiecare al patrulea articol (de exemplu .last), putem folosi :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

:nth-childSelectorul are un argument: aceasta poate fi un singur întreg, cuvintele cheie even, oddsau o formulă. Dacă este specificat un număr întreg, este selectat un singur element - dar cuvintele cheie sau o formulă vor itera prin toți copiii elementului părinte și vor selecta elemente potrivite - similar cu elementele de navigare dintr-o matrice JavaScript. Cuvintele cheie „par” și „impar” sunt simple (2, 4, 6 etc. sau respectiv 1, 3, 5). Formula este construită folosind sintaxa an+b, unde:

  • „A” este o valoare întreagă
  • „N” este litera literală „n”
  • „+” Este un operator și poate fi „+” sau „-”
  • „B” este un număr întreg și este necesar dacă un operator este inclus în formulă

Este important să rețineți că această formulă este o ecuație și iterează prin fiecare element frate, determinând care va fi selectat. Partea „n” a formulei, dacă este inclusă, reprezintă un set de numere întregi pozitive în creștere (la fel ca iterația printr-o matrice). În exemplul nostru de mai sus, am selectat fiecare al patrulea element cu formula 4n, care a funcționat deoarece de fiecare dată când a fost verificat un element, „n” a crescut cu unul (4 × 0, 4 × 1, 4 × 2, 4 × 3 etc.). Dacă ordinea unui element se potrivește cu rezultatul ecuației, acesta este selectat (4, 8, 12 etc.). Pentru o explicație mai aprofundată a matematicii implicate, vă rugăm să citiți acest articol.

Pentru a ilustra în continuare, iată câteva exemple de :nth-childselectoare valide :

Din fericire, nu trebuie să faceți întotdeauna calculul singur - există mai mulți :nth-childtesteri și generatoare acolo:

  • CSS-Tricks Tester
  • Testerul lui Lea Verou

: al n-lea copil (an + b din)

Există un filtru puțin cunoscut la care se poate adăuga în :nth-childconformitate cu specificația CSS Selectors: Capacitatea de a selecta :nth-childun subset de elemente, utilizând of formatul. Să presupunem că aveți o listă de conținut mixt: Unii au clasa .video, alții au clasa .pictureși doriți să selectați primele 3 imagini. Puteți face acest lucru cu filtrul „de” astfel:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Rețineți că acest lucru este distinct de adăugarea unui selector direct la :nth-childselector:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

Acest lucru poate deveni puțin confuz, deci un exemplu ar putea ajuta la ilustrarea diferenței:

Suportul pentru browser pentru filtrul „de” este foarte limitat: Începând cu această scriere, numai Safari a acceptat sintaxa. Pentru a verifica starea browserului dvs. preferat, iată problemele deschise legate de :nth-child(an+b of s):

  • Firefox: Suport pentru al n-lea copil (An + B de sel)
  • Chrome: Implement: nth-child (an + b of S)

Puncte de interes

  • :nth-childitera prin elemente începând din partea de sus a ordinii sursă. Singura diferență dintre acesta și :nth-last-childeste că acesta din urmă iterează prin elemente începând de la partea de jos a ordinii sursă.
  • Sintaxa pentru selectarea primului nnumăr de elemente este puțin contra-intuitivă. Începeți cu -n, plus numărul pozitiv de elemente pe care doriți să le selectați. De exemplu, li:nth-child(-n+3)va selecta primele 3 lielemente.
  • :nth-childSelectorul este foarte similar cu , :nth-of-typedar cu o singură diferență esențială: este mai puțin specifică. În exemplul nostru de mai sus, ei ar produce același rezultat, deoarece vom itera doar .moduleelemente, dar dacă am itera pe un grup mai complex de frați, am :nth-childîncerca să potrivim toți frații, nu numai frații de același tip de element. Acest lucru dezvăluie puterea :nth-child-it poate selecta orice element frate dintr-un aranjament, nu numai elementele care sunt specificate înainte de colon.

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
Orice 3.2+ Orice 9.5+ 9+ Orice Orice

:nth-childa fost introdus în CSS Selectors Module 3, ceea ce înseamnă că versiunile vechi ale browserelor nu o acceptă. Cu toate acestea, suportul modern pentru browser este impecabil, iar noile pseudo-selectoare sunt utilizate pe scară largă în mediile de producție. Dacă aveți nevoie de suport pentru browser mai vechi, fie polyfill pentru IE, fie utilizați acești selectori în moduri non-critice pentru îmbunătățirea progresivă, ceea ce este recomandat.