Hvordan lage et sebrastripet bord med CSS

click fraud protection

For å gjøre tabeller lettere å lese, er det ofte nyttig å stile rader med vekslende bakgrunnsfarger. En av de vanligste måtene å style tabeller på er å angi bakgrunnsfargen på hver annen rad. Dette blir ofte referert til som "sebra stripes."

Du kan oppnå dette ved å sette hver annen rad med en CSS-klasse og deretter definere stilen for den klassen. Dette fungerer, men er ikke den beste eller mest effektive måten å gjøre det på. Når du bruker denne metoden, må du kanskje redigere hver eneste rad i tabellen hver gang du trenger å redigere den tabellen for å sikre at hver rad er i samsvar med endringene. Hvis du for eksempel setter inn en ny rad i tabellen din, må klassen endres på annenhver rad under den.

CSS gjør det enkelt å style bord med sebrastriper. Du trenger ikke legge til noe ekstra HTML attributter eller CSS-klasser, bruker du bare: nth-of-type (n) CSS-velger.

Selektoren: nth-of-type (n) 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å kildeordren. Med andre ord, det kan matche hvert element som er det niende barnet til en bestemt type foreldre.

instagram viewer

Bokstaven n kan være et nøkkelord (for eksempel odd eller jevnt), et tall eller en formel.

For eksempel, for å style alle andre avsnittstagger med en gul bakgrunnsfarge, vil CSS-dokumentet ditt omfatte:

p: nth-of-type (odd) {
bakgrunn: gul;
}

Start med HTML-tabellen

Først oppretter du tabellen slik du vanligvis skriver den i HTML. Ikke legg til noen spesielle klasser i radene eller kolonnene.

I stilarket ditt legger du til følgende CSS:

tr: nth-of-type (odd) {
bakgrunnsfarge: #ccc;
}

Dette vil style annenhver rad med en grå bakgrunnsfarge som begynner med den første raden.

Stil 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 CSS-klassen til td. For eksempel:

td: nth-of-type (odd) {
bakgrunnsfarge: #ccc;
}

Bruke formler i en n-type (n) velger

Syntaksen for en formel som brukes i velgeren er an + b.

  • a er et tall som representerer syklusen eller indeksstørrelsen.
  • n er faktisk bokstaven "n" og representerer en teller som har 0.
  • + er en operatør, som også kan være "-"
  • b er et helt tall og representerer forskyvningsverdien - for eksempel hvor mange rader ned skal velgeren begynne å bruke bakgrunnsfargen. Dette kreves hvis en operatør er inkludert i formelen.

Hvis du for eksempel vil angi en bakgrunnsfarge for hver tredje rad, vil formelen være 3n + 0. CSS kan se slik ut:

tr: nth-of-type (3n + 0) {
bakgrunn: slategray;
}

Nyttige verktøy for bruk av nth-of-type Selector

Hvis du føler deg litt skremt av formelaspektet ved å bruke pseudoklassen nth-of-type velgeren, prøv: nth Tester-nettstedet som et nyttig verktøy som kan hjelpe deg med å definere syntaksen for å oppnå ønsket utseende. Bruk rullegardinmenyen til å velge nth-of-type (du kan også eksperimentere med andre pseudoklasser her også, for eksempel nth-child).

instagram story viewer