Utilizarea: nth-of-type (n) Cu tabele
Pentru a face tabelele mai ușor de citit, este adesea util să modelați rânduri cu culori de fundal alternante. Una dintre cele mai comune moduri de a modela tabelele este de a seta culoarea de fundal a fiecărui alt rând. Acest lucru este adesea denumit "dungi zebra".
Puteți realiza acest lucru prin a stabili fiecare rând cu o clasă CSS și apoi definirea stilului pentru acea clasă. Acest lucru funcționează, dar nu este cel mai bun sau cel mai eficient mod de a merge despre el.
Când utilizați această metodă, de fiecare dată când trebuie să editați acel tabel, este posibil să fie necesar să editați fiecare rând în tabel, pentru a vă asigura că fiecare rând este în concordanță cu modificările. De exemplu, dacă introduceți un rând nou în tabelul dvs., la fiecare alt rând de mai jos trebuie schimbat clasa.
CSS facilitează modelarea meselor cu dungi zebra. Nu este nevoie să adăugați alte atribute HTML sau clase CSS, pur și simplu utilizați selectorul de n-a-tip (n) CSS .
Selectorul n-de-tip (n) este o pseudo-clasă structurală în CSS care vă permite să modelați elementele bazate pe relația lor cu elementele părinte și frate. Puteți să-l utilizați pentru a selecta unul sau mai multe elemente pe baza ordinului sursă. Cu alte cuvinte, se poate potrivi fiecărui element care este al n-lea copil al unui anumit tip de părinte.
Scrisoarea n poate fi un cuvânt cheie (cum ar fi impar sau par), un număr sau o formulă.
De exemplu, pentru a modela orice alt etichetă paragraf cu o culoare de fundal galben, documentul dvs. CSS ar include:
p: nth-of-type (impar) {
fundal: galben;
}
Începeți cu tabelul HTML
Mai întâi, creați tabelul așa cum l-ați scrie în mod normal în HTML. Nu adăugați clase speciale la rânduri sau coloane.
În foaia dvs. de stil, adăugați următorul CSS:
tr: nth-of-type (impar) {
culoare de fundal: #ccc;
}
Aceasta va schița fiecare alt rând cu o culoare de fund gri, începând cu primul rând.
Style Alternating Columns in acelasi fel
Puteți face același tip de stil cu coloanele din tabelele dvs. Pentru a face acest lucru, schimba pur și simplu tr în clasa CSS la td. De exemplu:
td: n-a-tip (impar) {
culoare de fundal: #ccc;
}
Folosind formule într-un selector n-de-tip (n)
Sintaxa pentru o formulă folosită în selector este a + b.
a este un număr care reprezintă ciclul sau mărimea indexului.
n este de fapt litera "n" și reprezintă un contor, care joacă la 0.
+ este un operator, care poate fi, de asemenea, "-"
b este un număr întreg și reprezintă valoarea de offset - de exemplu, câte rânduri în jos ar trebui să selectorul să aplice culoarea de fundal. Acest lucru este necesar dacă un operator este inclus în formulă.
De exemplu, dacă doriți să setați o culoare de fundal pentru fiecare al treilea rând, formula dvs. ar fi 3n + 0. CSS-ul dvs. ar putea arăta astfel:
tr: nth-of-type (3n + 0) {
fundal: slategray;
}
Instrumente utile pentru utilizarea selectorului nth-of-type
Dacă vă simțiți puțin deranjat de aspectul formulei de utilizare a selectorului n-type de tip pseudo-class, încercați site-ul: nth Tester ca un instrument util care vă poate ajuta să definiți sintaxa pentru a obține aspectul dorit. Utilizați meniul drop-down pentru a selecta nth-of-type (puteți, de asemenea, să experimentați și alte pseudo-clase aici, cum ar fi nth-child).