For å gjøre tabeller enklere å lese, er det ofte nyttig å style rader med alternerende bakgrunnsfarger. En av de vanligste måtene å style tabeller er å angi bakgrunnsfarge på hver andre rad. Dette kalles ofte "zebra stripes".
Du kan oppnå dette ved å sette hver andre rad med en CSS klasse og deretter definere stilen for den klassen. Dette fungerer, men er ikke den beste eller mest effektive måten å gå om det. Når du bruker denne metoden, må du redigere hver enkelt rad i tabellen hver gang du må redigere tabellen for å sikre at hver rad stemmer overens med endringene. For eksempel, hvis du legger inn en ny rad i bordet ditt, må hver annen rad under den ha forandret klassen.
CSS gjør det enkelt å style bord med sebra striper. Du trenger ikke å legge til noen ekstra HTML-attributter eller CSS-klasser, du bruker bare: nth-of-type (n) CSS-velgeren.
Den nth-of-type (n) -velgeren er en strukturell pseudoklasse i CSS som lar deg utforme elementer basert på deres forhold til foreldre og søskenelementer. Du kan bruke den til å velge ett eller flere elementer basert på deres kildeordre. Med andre ord kan det matche hvert element som er nt barn av en bestemt type foreldre.
Bokstaven n kan være et søkeord (for eksempel merkelig eller jevnt), et tall eller en formel.
Hvis du for eksempel vil stile alle andre avsnittetiketter med en gul bakgrunnsfarge, vil CSS-dokumentet omfatte:
p: nth-of-type (merkelig) { bakgrunn: gul;}
Start med HTML-tabellen
Først opprett bordet ditt som du normalt ville skrive det i HTML. Ikke legg til noen spesielle klasser i radene eller kolonnene.
Legg til følgende CSS i stilarket:
tr: nth-of-type (merkelig) { background-color: #ccc;}
Dette vil style hver andre rad med en grå bakgrunnsfarge som begynner med den første raden.
Style vekslende kolonner på samme måte
Du kan gjøre samme type styling til kolonner i tabellene dine. For å gjøre det, bare endre tr i din CSS klasse til td. For eksempel:
td: nth-of-type (merkelig) { background-color: #ccc;}
Bruke formler i en nth-of-type (n) Selector
Syntaxen for en formel som brukes i velgeren er en + b.
- a er et tall som representerer syklusen eller indeksstørrelsen.
- n er faktisk bokstaven "n" og representerer en teller som ligger på 0.
- + er en operatør, som også kan være "-"
- b er et heltall og representerer forskyvningsverdien, for eksempel hvor mange rader ned skal velgeren begynne å bruke bakgrunnsfargen. Dette kreves dersom en operatør inngår i formelen.
For eksempel, hvis du vil angi en bakgrunnsfarge for hver 3. rad, vil formelen din være 3n + 0. Din CSS kan se slik ut:
tr: nth-of-type (3n + 0) { bakgrunn: slategray;}
Nyttige verktøy for å bruke nth-of-type selector
Hvis du føler deg litt skremt av formelen ved bruk av pseudoklassen nth-of-type velger, kan du prøve: nth Tester-siden som et nyttig verktøy som kan hjelpe deg med å definere syntaksen for å oppnå det utseendet du vil ha. Bruk rullegardinmenyen til å velge nth-of-type (du kan også eksperimentere med andre pseudoklasser her, for eksempel nth-barn).
