Bjørn Enki professional website design offers custom website design services internationally, with a focus on Los Angeles website design.

Please note: This page is a norwegian translation of the World Wide Web Consortium's page on "CSS tips & triks: even and odd rules". This translation was written by Bjorn Enki, and may contain translation errors. For the original english version, please visit http://www.w3.org/Style/Examples/007/evenodd.

Vennligst bemerk: Dette er en norsk oversettelse av "CSS tips & triks: runde og urunde regler" siden av the Word Wide Web Consortium. Denne oversettelsen er skrevet av Bjorn Enki, og inneholder muligens feiloversettinger. For den originale og oppdaterte versjonen (på engelsk), vennligst se http://www.w3.org/Style/Examples/007/evenodd.

Web Stilark
CSS tips & triks

(Denne siden bruker CSS stilark)

Status

Advarsel: når dette ble skrevet (Februar 2003), støttet enda ikke de store nettleserne 'nth-child' selektoren (introdusert i November 2001) og bare noen veldig få støttet COL elementet.

Runde og urunde regler

En måte å forbedre lesbarheten til store tabeller er å farge annenhver rad. For eksempel, tabellen nedenfor har en lysegrå bakgrunn for runde rader og hvitt for urunde. Reglene for dette er svært enkle:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Måned199419951996199719981999200020012002
Januar141314131411111111
Februar131512151512141313
Mars161514171615141515
April171617171715151616
Mai212020212220212019
Juni242325242523252324
Juli292826262726252625
August292827282827262826
September242323262424242221
Oktober2022202220192022
November1817161716151415
Desember1513131413101311

CSS tillater faktisk ikke bare runde/urunde endringer, men også vilkårlige. Ordene 'even' (rund) og 'odd' (urunde) er bare praktiske. For eksempel, for en lang liste kan man skrive dette:

li:nth-child(5n+3) {font-weight: bold}

Her står det at hver femte listeelement, fra og med den tredje, skal være tykk. Med andre ord, elementene på rad 3, 8, 13, 18, 23, osv., kommer til å være tykke.

Runde og urunde kolonner

Det samme fungerer også for kolonnene til tabeller, men det må også da være et element i dokumentet som tilsvarer kolonnen i stilarket. HTML har COL for dette. Tabellen må begynne med en COL for hver kolonne:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Måned<th>1994<th>1995<th>1996...

(COL kan brukes til andre ting en stil, men i dette tilfellet trenger vi bare at COL elementene er på plass.) De følgene reglene gir den første kolonnen en gul bakgrunn, deretter får annen hver kolonne fra og med kolonne 3 en grå bakgrunn:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
Måned199419951996199719981999200020012002
Januar141314131411111111
Februar131512151512141313
Mars161514171615141515
April171617171715151616
Mai212020212220212019
Juni242325242523252324
Juli292826262726252625
August292827282827262826
September242323262424242221
Oktober2022202220192022
November1817161716151415
Desember1513131413101311

Bakgrunnen til rader (TR) kommer til å vise foran bakgrunnen til kolonner (COL), derfor burde du ikke angi en bakgrunn på radene dersom du vil sikre at bakgrunnen til kolonnene viser.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Feb 2003;
last updated $Date: 2009/04/04 16:23:10 $ GMT