Použitie: nth-of-type (n) S tabuľkami
Ak chcete tabuľky ľahšie čítať, je často užitočné štýl riadkov so striedajúcimi sa farbami pozadia. Jedným z najbežnejších spôsobov štýlov stolov je nastavenie farby pozadia každého ďalšieho riadku. To sa často označuje ako "zebra pruhy".
Môžete to dosiahnuť tým, že nastavíte každý ďalší riadok s triedou CSS a potom definujete štýl pre danú triedu. Toto funguje, ale nie je tým najlepším alebo najefektívnejším spôsobom.
Pri použití tejto metódy zakaždým, keď potrebujete upraviť túto tabuľku, možno budete musieť upraviť každý riadok v tabuľke, aby ste zabezpečili, že každý riadok bude v súlade so zmenami. Ak napríklad vložíte do tabuľky nový riadok, každý druhý riadok, ktorý sa nachádza pod ním, musí mať zmenenú triedu.
CSS uľahčuje štýl stôl so zbraňami. Nemusíte pridávať žiadne ďalšie atribúty HTML alebo triedy CSS, stačí použiť volič CSS n-type (n).
Selektor n-typu (n) je štrukturálna pseudotrieda v systéme CSS, ktorá vám umožňuje štýlové prvky založené na ich vzťahoch s rodičmi a súrodencami. Môžete ho použiť na výber jedného alebo viacerých prvkov na základe ich zdrojového poradia. Inými slovami, môže sa zhodovať s každým prvkom, ktorý je ným dieťaťom určitého typu jeho rodiča.
Písmeno n môže byť kľúčové slovo (napríklad nepárne alebo nepárne), číslo alebo vzorec.
Napríklad, ak chcete štýlovať každú ďalšiu značku odseku so žltou farbou pozadia, váš dokument CSS bude obsahovať:
p: n-of-type (nepárne) {
pozadie: žltá;
}
Začnite s tabuľkou HTML
Najskôr vytvorte svoju tabuľku tak, ako by ste ju normálne písali v jazyku HTML. Do riadkov alebo stĺpcov nepridávajte žiadne špeciálne triedy.
Vo svojom šablóne štýlov pridajte nasledujúci CSS:
tr: n-of-type (nepárne) {
background-color: #ccc;
}
To bude štýl každého ďalšieho riadku so sivou farbou pozadia začínajúcej prvým riadkom.
Štýl Alternatívne stĺpce rovnakým spôsobom
Môžete robiť rovnaký druh štýlu do stĺpcov v tabuľkách. Ak to chcete urobiť, stačí zmeniť tr v triede CSS na td. Napríklad:
td: n-of-type (nepárne) {
background-color: #ccc;
}
Použitie vzorcov v n-type (n) Selector
Syntax pre vzorec použitý v prepínači je + b.
a je číslo, ktoré predstavuje veľkosť cyklu alebo indexu.
n je v skutočnosti písmeno "n" a predstavuje počítadlo, ktoré hviezdy na 0.
+ je operátor, ktorý môže byť tiež "-"
b je celé číslo a predstavuje hodnotu posunu - napríklad koľko riadkov sa má nadol nastaviť, ak selektor začne používať farbu pozadia. Toto sa vyžaduje, ak je vo formulári zahrnutý prevádzkovateľ.
Ak napríklad chcete nastaviť farbu pozadia pre každý tretí riadok, váš vzorec by bol 3n + 0. Váš CSS môže vyzerať takto:
tr: n-typ (3n + 0) {
pozadie: slategray;
}
Užitočné nástroje na používanie n-z-typu selektor
Ak sa cítite trochu zúfalý vzhľadom na vzorec použitia selektora pseudotriedy nth-of-type, vyskúšajte: nth Site Tester ako užitočný nástroj, ktorý vám pomôže definovať syntax, aby ste dosiahli požadovaný vzhľad. Pomocou rozbaľovacej ponuky vyberte nth-of-type (môžete tiež experimentovať s inými pseudotriedami, napríklad nth-child).