Použití: nth-of-type (n) S tabulkami
Pro snadnější čtení tabulek je často užitečné ukládat řádky se střídavými barvami pozadí. Jedním z nejběžnějších způsobů, jak stylovat tabulky, je nastavit barvu pozadí každého dalšího řádku. To je často označováno jako "zebra pruhy".
Můžete to dosáhnout tak, že nastavíte každý další řádek s třídou CSS a definujete styl pro danou třídu. To funguje, ale nejde o to nejlepší ani nejúčinnější způsob, jak to udělat.
Při použití této metody pokaždé, když potřebujete upravit tabulku, bude pravděpodobně nutné upravit jednotlivé řádky v tabulce, abyste zajistili, že každý řádek bude v souladu se změnami. Například pokud vložíte nový řádek do tabulky, každý druhý řádek pod ním musí změnit třídu.
CSS usnadňuje vytváření stolů se zebrami. Nemusíte přidávat žádné další atributy HTML nebo třídy CSS, stačí použít volič CSS : nth-of-type (n).
Selektor n-typu (n) je strukturální pseudotřída v CSS, která umožňuje stylizovat prvky založené na jejich vztazích k rodičovským a sourozeným prvkům. Můžete jej použít k výběru jednoho nebo více prvků na základě jejich zdrojového řádu. Jinými slovy, může odpovídat každému prvku, který je ným dítětem určitého typu jeho rodiče.
Písmeno n může být klíčové slovo (např. Liché nebo sudé), číslo nebo vzorec.
Chcete-li například stylovat každou další značku odstavce se žlutou barvou pozadí, váš dokument CSS by obsahoval:
p: n-of-type (liché) {
pozadí: žlutá;
}}
Začněte s tabulkou HTML
Nejprve vytvořte svoji tabulku, jakou byste normálně psali v HTML. Do řádků nebo sloupců nepřidávejte žádné zvláštní třídy.
Ve stylovém stylu přidejte následující CSS:
tr: nth-of-type (lichý) {
barva pozadí: #ccc;
}}
To bude stylovat každý druhý řádek se šedou barvou pozadí začínající prvním řádkem.
Styl střídajících se sloupců stejným způsobem
Stejný typ stylu můžete udělat ve sloupcích ve svých tabulkách. Chcete-li tak učinit, jednoduše změňte tr ve své třídě CSS na td. Například:
td: n-of-type (liché) {
barva pozadí: #ccc;
}}
Použití vzorců v n-type (n) Selector
Syntaxe pro vzorec použitého v přepínači je + b.
a je číslo, které představuje cyklus nebo velikost indexu.
n je vlastně písmeno "n" a představuje počitadlo, které hvězdy na 0.
+ je operátor, který může být také "-"
b je celé číslo a představuje hodnotu posunu - například kolik řádků by mělo začít volit barvu pozadí. Je to nutné, pokud je ve vzorci zahrnut operátor.
Například pokud chcete nastavit barvu pozadí pro každý třetí řádek, bude váš vzorec 3n + 0. Váš CSS může vypadat takto:
tr: nth-typu (3n + 0) {
pozadí: slategray;
}}
Užitečné nástroje pro použití n-typu-selektor
Pokud se cítíte poněkud zběsilý aspektem použití formulace pseudo-třídy nth-of-type, vyzkoušejte stránku nth Tester jako užitečný nástroj, který vám pomůže definovat syntaxi, abyste získali požadovaný vzhled. Pomocí rozbalovací nabídky vyberte nth-of-type (můžete také experimentovat s dalšími pseudotřídami, například nth-child).