: al n-lea de tip - CSS-Tricks

Anonim

:nth-of-typeSelector vă permite să selectați unul sau mai multe elemente bazate pe ordinea lor sursă, conform unei formule. 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ă avem o listă neordonată și dorim să „listăm zebra” alternând elementele listei:



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

În loc să adăugăm clase la fiecare articol din listă (de exemplu, .even& .odd) putem folosi :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

După cum puteți vedea, :nth-of-typeacceptă un argument: acesta poate fi un singur număr întreg, cuvintele cheie „par” sau „impar” sau o formulă așa cum se arată mai sus. 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 în JavaScript. Cuvintele cheie „par” și „impar” sunt simple, dar 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 doilea element cu formula 2n, care a funcționat deoarece de fiecare dată când un element a fost bifat, „n” a crescut cu unul (2 × 0, 2 × 1, 2 × 2, 2 × 3 etc.). Dacă ordinea unui element se potrivește cu rezultatul ecuației, acesta este selectat (2, 4, 6 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-of-typeselectoare valide :

Verificați acest stilou!

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

  • CSS-Tricks Tester
  • Testerul lui Lea Verou

Puncte de interes

  • :nth-of-typeitera prin elemente începând din partea de sus a ordinii sursă. Singura diferență dintre acesta și :nth-last-of-typeeste că acesta din urmă iterează prin elemente începând de la partea de jos a ordinii sursă.
  • :nth-of-typeSelectorul este foarte similar cu , :nth-childdar cu o singură diferență esențială: este mai specific. În exemplul nostru de mai sus, ei ar produce același rezultat, deoarece vom itera doar lielemente, 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-of-type-it vizează un anumit tip de element într-un aranjament în raport cu frați similari, nu toți frații.

Suport pentru browser

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

:nth-of-typea 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.