For at gøre tabeller lettere at læse, er det ofte nyttigt at style rækker med skiftende baggrundsfarver. En af de mest almindelige måder at style tabeller på er at indstille baggrundsfarven på hver anden række. Dette kaldes ofte "zebra stripes".
Du kan opnå dette ved at sætte hver anden række med en CSS klasse og derefter definere stilen til den klasse. Dette virker, men er ikke den bedste eller mest effektive måde at klare sig på. Når du bruger denne metode, skal du muligvis redigere hver enkelt række i tabellen, hver gang du har brug for at redigere denne tabel for at sikre, at hver række er i overensstemmelse med ændringerne. For eksempel, hvis du indsætter en ny række i din tabel, skal hver anden række under den have ændret klassen.
CSS gør det nemt at stille bord med zebra striber. Du behøver ikke at tilføje ekstra HTML attributter eller CSS klasser, du bruger bare: nth-of-type (n) CSS vælgeren.
Den nth-of-type (n) vælger er en strukturel pseudoklasse i CSS, der giver dig mulighed for at style elementer baseret på deres forhold til forældre og søskendeelementer. Du kan bruge den til at vælge et eller flere elementer baseret på deres kildeordre. Med andre ord kan det matche hvert element, der er nt barnet af en bestemt type forælder.
Bogstavet n kan være et søgeord (som ulige eller lige), et tal eller en formel.
For eksempel at formatere hvert andet afsnit tag med en gul baggrundsfarve, vil dit CSS-dokument indeholde:
p: nth-of-type (ulige) { baggrund: gul;}
Start med din HTML-tabel
Opret først dit bord, som du normalt ville skrive det i HTML. Tilføj ikke nogen specielle klasser til rækker eller kolonner.
I dit stylesheet skal du tilføje følgende CSS:
tr: nth-of-type (ulige) { background-color: #ccc;}
Dette vil style hver anden række med en grå baggrundsfarve, der starter med den første række.
Style Alternerende kolonner på samme måde
Du kan gøre den samme slags styling til kolonner i dine tabeller. For at gøre det, skal du blot ændre tr i din CSS klasse til td. For eksempel:
td: nth-of-type (ulige) { background-color: #ccc;}
Brug af formler i en nth-of-type (n) vælger
Syntaxen for en formel anvendt i vælgeren er en + b.
- a er et tal, der repræsenterer cyklus eller indeksstørrelse.
- n er faktisk bogstavet "n" og repræsenterer en tæller, som ligger ved 0.
- + er en operatør, som også kan være "-"
- b er et helt tal og repræsenterer forskydningsværdien, for eksempel hvor mange rækker ned skal vælgeren begynde at anvende baggrundsfarven. Dette er påkrævet, hvis en operatør er inkluderet i formlen.
For eksempel, hvis du vil indstille en baggrundsfarve for hver 3. række, vil din formel være 3n + 0. Din CSS kan se sådan ud:
tr: nth-of-type (3n + 0) { baggrund: slategray;}
Nyttige værktøjer til brug af nth-of-type selector
Hvis du føler dig lidt skræmt af formelaspektet ved at bruge pseudoklassens nth-of-type vælger, skal du prøve: nth Tester-webstedet som et nyttigt værktøj, der kan hjælpe dig med at definere syntaksen for at opnå det ønskede look. Brug rullemenuen til at vælge nth-of-type (du kan også eksperimentere med andre pseudoklasser her også, som nth-barn).
