För att göra tabeller lättare att läsa är det ofta användbart att utforma rader med alternerande bakgrundsfärger. Ett av de vanligaste sätten att stila tabeller är att ställa in bakgrundsfärgen i varannan rad. Detta kallas ofta "zebra stripes".
Du kan åstadkomma detta genom att ställa in varannan rad med en CSS-klass och sedan definiera stilen för den klassen. Detta fungerar men är inte det bästa eller mest effektiva sättet att klara det. När du använder den här metoden måste du kanske ändra varje rad i tabellen varje gång du behöver redigera den där tabellen så att varje rad överensstämmer med ändringarna. Om du till exempel lägger in en ny rad i ditt bord måste alla andra rader under det behöva få klassen ändrats.
CSS gör det enkelt att ställa bord med sebraband. Du behöver inte lägga till några extra HTML-attribut eller CSS-klasser, du använder bara nth-of-type (n) CSS-väljaren.
Den nth-of-type (n) väljaren är en strukturell pseudoklass i CSS som låter dig utforma element baserat på deras relationer till föräldrar och syskonelement. Du kan använda den för att välja ett eller flera element baserat på deras källorder. Med andra ord kan det matcha varje element som är nth barnet av en viss typ av dess förälder.
Brevet n kan vara ett nyckelord (som udda eller jämnt), ett tal eller en formel.
Till exempel, för att ställa in varannan stycketikett med en gul bakgrundsfärg, skulle ditt CSS-dokument innehålla:
p: nth-of-type (udda) { bakgrund: gul;}
Börja med ditt HTML-bord
Först skapa ditt bord som du normalt skulle skriva det i HTML. Lägg inte till några speciella klasser i raderna eller kolumnerna.
Lägg till följande CSS i ditt stilark:
tr: nth-of-type (udda) { bakgrundsfärg: #ccc;}
Detta kommer att stila varannan rad med en grå bakgrundsfärg som börjar med den första raden.
Style Alternating Columns på samma sätt
Du kan göra samma typ av styling till kolumner i dina tabeller. För att göra så ändrar du bara tr i din CSS-klass till td. Till exempel:
td: nth-of-type (udda) { bakgrundsfärg: #ccc;}
Använda formler i en nth-of-type (n) väljare
Syntaxen för en formel som används i väljaren är en + b.
- a är ett tal som representerar cykeln eller indexstorleken.
- n är faktiskt bokstaven "n" och representerar en räknare som stiger vid 0.
- + är en operatör, som också kan vara "-"
- b är ett heltal och representerar förskjutningsvärdet, till exempel hur många rader ned ska väljaren börja tillämpa bakgrundsfärgen. Detta krävs om en operatör ingår i formeln.
Om du till exempel vill ange en bakgrundsfärg för var tredje rad, skulle din formel vara 3n + 0. Din CSS kan se ut så här:
tr: nth-of-type (3n + 0) { bakgrund: slategray;}
Användbara verktyg för att använda nth-of-type selector
Om du känner dig lite avskräckt av formeln att använda pseudoklassens nth-of-type-väljare, kan du prova: nth Tester-webbplatsen som ett användbart verktyg som kan hjälpa dig att definiera syntaxen för att uppnå det utseende du vill ha. Använd rullgardinsmenyn för att välja nth-of-type (du kan också experimentera med andra pseudoklasser här, till exempel nth-barn).
