Na uľahčenie čítania tabuliek je často užitočné upravovať štýl riadkov striedajúcimi sa farbami pozadia. Jedným z najbežnejších spôsobov štýlov tabuliek je nastavenie farby pozadia každého druhého riadku. Toto sa často označuje ako „zebrie pruhy“.
Môžete to dosiahnuť tak, že každý druhý riadok nastavíte pomocou triedy CSS a potom definujete štýl pre túto triedu. Toto funguje, ale nie je to najlepší alebo najefektívnejší spôsob, ako to dosiahnuť. Pri použití tejto metódy budete musieť zakaždým, keď budete musieť upraviť túto tabuľku, upraviť každý jeden riadok v tabuľke, aby ste sa uistili, že každý riadok je v súlade so zmenami. Napríklad ak do tabuľky vložíte nový riadok, každý druhý riadok pod ním musí mať zmenenú triedu.
CSS uľahčuje štýl stolov so zebrovými pruhmi. Nemusíte pridávať žiadne ďalšie HTML atribúty alebo triedy CSS, stačí použiť: n-tý-typ (n) Selektor CSS.
Selektor: n-tý typ (n) je štrukturálna pseudotrieda v CSS, ktorá vám umožňuje upravovať štýl prvkov na základe ich vzťahov k nadradeným a súrodeneckým prvkom. 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-tým dieťaťom konkrétneho typu jeho rodiča.
Písmeno n môže byť kľúčové slovo (napríklad nepárne alebo párne), číslo alebo vzorec.
Napríklad na to, aby ste každý druhý odsek označili štýlom žltou farbou pozadia, váš dokument CSS bude obsahovať:
p: n-tý typ (nepárny) {
pozadie: žlté;
}
Začnite tabuľkou HTML
Najskôr vytvorte svoju tabuľku tak, ako by ste ju normálne napísali v HTML. Do riadkov ani stĺpcov nepridávajte žiadne špeciálne triedy.
Do šablóny štýlov pridajte nasledujúce CSS:
tr: n-tý typ (nepárny) {
farba pozadia: #ccc;
}
Týmto sa upraví štýl každého druhého riadku so sivou farbou pozadia počnúc prvým riadkom.
Štýl striedania stĺpcov rovnakým spôsobom
Rovnaký štýl môžete upraviť aj pre stĺpce vo svojich tabuľkách. Ak to chcete urobiť, jednoducho zmeňte tr vo svojej triede CSS na td. Napríklad:
td: n-tý typ (nepárny) {
farba pozadia: #ccc;
}
Používanie vzorcov v selektore n-tého typu (n)
Syntax pre vzorec použitý v selektore je + b.
- a je číslo, ktoré predstavuje veľkosť cyklu alebo indexu.
- n je vlastne písmeno „n“ a predstavuje počítadlo, ktoré označuje nulu.
- + je operátor, ktorý môže byť tiež „-“
- b je celé číslo a predstavuje hodnotu posunu - napríklad o koľko riadkov nadol by mal selektor začať nanášať farbu pozadia. Toto je potrebné, ak je do vzorca zahrnutý operátor.
Napríklad ak chcete nastaviť farbu pozadia pre každý 3. riadok, váš vzorec bude 3n + 0. Váš CSS môže vyzerať takto:
tr: n-tý typ (3n + 0) {
pozadie: slategray;
}
Užitočné nástroje na používanie selektora n-tého typu
Ak máte pocit, že vás trochu znepokojuje formulačný aspekt používania selektora n-tého typu pseudotriedy, vyskúšajte: n-tý tester ako užitočný nástroj, ktorý vám pomôže definovať syntax pre dosiahnutie požadovaného vzhľadu. Pomocou rozbaľovacej ponuky vyberte n-tý typ (môžete tu tiež experimentovať s inými pseudotriedami, napríklad n-podriadený).