Aby se tabulky snáze četly, je často užitečné stylovat řádky se střídajícími se barvami pozadí. Jedním z nejběžnějších způsobů, jak stylovat tabulky, je nastavit barvu pozadí každého druhého řádku. Toto se často označuje jako „pruhy zebry“.
Toho můžete dosáhnout nastavením každého druhého řádku s třídou CSS a následným definováním stylu pro tuto třídu. To funguje, ale není to nejlepší nebo nejúčinnější způsob, jak to udělat. Když používáte tuto metodu, pokaždé, když potřebujete upravit tuto tabulku, budete muset upravit každý jeden řádek v tabulce, abyste zajistili, že každý řádek je konzistentní se změnami. Například pokud vložíte do tabulky nový řádek, každý druhý řádek pod ním musí mít třídu změněnou.
CSS usnadňuje stylování stolů se zebrovými pruhy. Nemusíte přidávat žádné další HTML atributy nebo třídy CSS, stačí použít: nth-of-type (n) Selektor CSS.
Selektor: nth-of-type (n) je strukturální pseudotřída v CSS, která vám umožňuje stylovat prvky na základě jejich vztahů k nadřazeným a sourozeneckým prvkům. Můžete jej použít k výběru jednoho nebo více prvků na základě jejich zdrojového pořadí. Jinými slovy, může odpovídat každému prvku, který je n -tým dítětem konkrétního typu jeho rodiče.
Písmeno n může být klíčové slovo (například liché nebo sudé), číslo nebo vzorec.
Například pro stylování každé druhé značky odstavce se žlutou barvou pozadí by váš dokument CSS obsahoval:
p: n-tý typ (lichý) {
pozadí: žlutá;
}
Začněte s tabulkou HTML
Nejprve vytvořte tabulku tak, jak byste ji normálně psali v HTML. Nepřidávejte do řádků nebo sloupců žádné speciální třídy.
Do šablony stylů přidejte následující CSS:
tr: n-tý typ (lichý) {
barva pozadí: #ccc;
}
Tím se stylizuje každý druhý řádek šedou barvou pozadí počínaje prvním řádkem.
Stylujte střídavé sloupce stejným způsobem
Ve sloupcích v tabulkách můžete provádět stejný styling. Chcete-li tak učinit, jednoduše změňte tr ve své třídě CSS na td. Například:
td: n-tý typ (lichý) {
barva pozadí: #ccc;
}
Používání vzorců v selektoru n-tého typu (n)
Syntaxe vzorce používaného v selektoru je + b.
- a je číslo, které představuje velikost cyklu nebo indexu.
- n je ve skutečnosti písmeno „n“ a představuje počitadlo, které označuje 0.
- + je operátor, kterým může být také „-“
- b je celé číslo a představuje hodnotu posunutí - například o kolik řádků dolů má selektor začít aplikovat barvu pozadí. To je nutné, pokud je do vzorce zahrnut operátor.
Například pokud chcete nastavit barvu pozadí pro každý 3. řádek, váš vzorec bude 3n + 0. Váš CSS může vypadat takto:
tr: nth-of-type (3n + 0) {
pozadí: slategray;
}
Užitečné nástroje pro použití selektoru n-tého typu
Pokud máte pocit, že vás trochu znepokojuje formulační aspekt používání selektoru n-tého typu pseudotřídy, zkuste: n-tý tester jako užitečný nástroj, který vám pomůže definovat syntaxi k dosažení požadovaného vzhledu. Pomocí rozbalovací nabídky vyberte n-tý typ (můžete zde také experimentovat s jinými pseudotřídami, například n-podřízený).