Web Stilark
CSS tips & triks

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}

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}

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.