Përdorimi: nth-of-type (n) Me Tabelat
Për të bërë më të lehtë leximin e tabelave, shpesh është e dobishme për të rreshtuar rreshta me ngjyrat alternative të sfondit. Një nga mënyrat më të zakonshme të tabelave të stilit është të vendosni ngjyrën e sfondit të çdo rreshti tjetër. Kjo shpesh quhet "vija zebra".
Ju mund ta bëni këtë duke vendosur çdo rresht tjetër me një klasë CSS dhe pastaj duke përcaktuar stilin për atë klasë. Kjo punon, por nuk është mënyra më e mirë ose më efikase për të shkuar në lidhje me të.
Kur përdorni këtë metodë, çdo herë që duhet të redaktoni atë tabelë, mund të keni për të redaktuar çdo rresht të vetëm në tabelë për të siguruar që çdo rresht është në përputhje me ndryshimet. Për shembull, nëse futni një rresht të ri në tryezën tuaj, çdo rresht tjetër më poshtë duhet të ketë ndryshuar klasën.
CSS e bën të lehtë të vendosni tabela me vija zebra. Ju nuk keni nevojë të shtoni ndonjë atribut shtesë HTML ose klasë CSS, thjesht përdorni përzgjedhësin e CSS (nth-of-type).
Zgjedhësja e tipit (n) është një pseudo-klasë strukturore në CSS që ju lejon të krijoni elemente stili bazuar në marrëdhëniet e tyre me elementet e prindërve dhe vëllezërve. Ju mund ta përdorni atë për të zgjedhur një ose më shumë elemente bazuar në rendin e tyre burimor. Me fjalë të tjera, ai mund të përputhet me çdo element që është fëmija i nëntë i një lloji të veçantë të prindit të tij.
Letra n mund të jetë një fjalë kyçe (si e çuditshme ose madje), një numër ose një formulë.
Për shembull, për të stiluar çdo etiketë tjetër paragrafi me një ngjyrë të verdhë të sfondit, dokumenti CSS do të përfshinte:
p: nth-of-type (çuditshëm) {
sfond: i verdhë;
}
Filloni me tabelën tuaj HTML
Së pari, krijoni tryezën tuaj siç normalisht do ta shkruani në HTML. Mos shtoni asnjë klasë speciale në rreshtat ose kolonat.
Në fletën tuaj të stilit, shtoni CSS-në e mëposhtme:
tr: nth-e-type (çuditshme) {
background-color: #ccc;
}
Kjo do të stilojë çdo rresht tjetër me një ngjyrë gri të sfondit duke filluar me rreshtin e parë.
Style Columns alternative në të njëjtën mënyrë
Ju mund të bëni të njëjtin stil të kolonave në tryezat tuaja. Për ta bërë këtë, thjesht ndrysho tr në klasën tuaj CSS në td. Për shembull:
td: nth-of-type (çuditshme) {
background-color: #ccc;
}
Përdorimi i Formulave në përzgjedhësin e n-të-llojit (n)
Sintaksa për një formulë të përdorur në përzgjedhës është një + b.
a është një numër që përfaqëson ciklin ose madhësinë e indeksit.
n është në të vërtetë shkronja "n" dhe përfaqëson një kundër, që yjet në 0.
+ është një operator, i cili gjithashtu mund të jetë "-"
b është një numër i plotë dhe përfaqëson vlerën e kompensuar - për shembull, sa rreshta poshtë duhet të përzgjidhet të fillojë zbatimin e ngjyrës së sfondit. Kjo kërkohet nëse një operator përfshihet në formulë.
Për shembull, nëse dëshironi të vendosni një ngjyrë të sfondit për çdo rresht të tretë, formula juaj do të jetë 3n + 0. CSS juaj mund të duket kështu:
tr: lloji i tipit (3n + 0) {
sfond: slategray;
}
Mjetet e dobishme për përdorimin e përzgjedhësit të tipit
Nëse ndjeheni pak të lëkundur nga aspekti i formulës së përdorimit të selektorit të pseudoklasit, provoni faqen e testimit si një mjet i dobishëm që mund t'ju ndihmojë të përcaktoni sintaksën për të arritur pamjen që dëshironi. Përdorni menunë e dropdown për të zgjedhur nth-of-type (ju gjithashtu mund të eksperimentoni me pseudo-klasa të tjera këtu, gjithashtu, si nth-child).