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 "zebrastriber".
Du kan opnå dette ved at indstille hver anden række med en CSS-klasse og derefter definere stilen for den klasse. Dette fungerer, men er ikke den bedste eller mest effektive måde at gøre det 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 tabellen 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 let at style borde med zebrastriber. Du behøver ikke tilføje noget ekstra HTML attributter eller CSS-klasser, skal du bare bruge: nth-of-type (n) CSS-vælger.
Selektoren: nth-of-type (n) 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 kilde rækkefølge. Med andre ord kan det matche hvert element, der er det niende barn af en bestemt type af sin forælder.
Bogstavet n kan være et nøgleord (såsom ulige eller lige), et tal eller en formel.
For eksempel for at style hvert andet afsnitstag med en gul baggrundsfarve, vil dit CSS-dokument omfatte:
p: nth-of-type (ulige) {
baggrund: gul;
}
Start med din HTML-tabel
Opret først din tabel, som du normalt ville skrive den i HTML. Føj ikke nogen specielle klasser til rækkerne eller kolonnerne.
I dit typografiark skal du tilføje følgende CSS:
tr: nth-of-type (ulige) {
baggrundsfarve: #ccc;
}
Dette vil style hver anden række med en grå baggrundsfarve startende med den første række.
Stil skiftende kolonner på samme måde
Du kan udføre den samme form for 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) {
baggrundsfarve: #ccc;
}
Brug af formler i en n-type (n) -vælger
Syntaksen for en formel, der anvendes i vælgeren, er an + b.
- a er et tal, der repræsenterer cyklus eller indeksstørrelse.
- n er faktisk bogstavet "n" og repræsenterer en tæller, som har 0.
- + er en operatør, som også kan være "-"
- b er et heltal 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.
Hvis du f.eks. 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 afskrækket af formelaspektet ved at bruge pseudoklassen nth-of-type vælger, prøv: nte testerside 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å, såsom nth-child).