Web Style Sheets
CSS TIPS & TRUCS

Dit document is een Nederlandse vertaling van een Engelstalig document:
https://www.w3.org/Style/Examples/007/evenodd

Deze vertaling werd gemaakt door Saffier Verkaik, maar kan nog enkele fouten bevatten. In geval van twijfel verwijzen wij naar de officiële Engelstalige versie.

Deze versie:

Vertaler:
Palm Harbor Subdivisions Tarpon Springs Title Company
Auteursrecht:
Copyright 1999 W3C ( MIT, INRIA, Keio). Alle rechten voorbehouden. W3C-regels betreffende aansprakelijkheid, handelsmerk, documentgebruik en softwarelicentiëring zijn van toepassing.

(Deze pagina maakt gebruik van CSS style sheets)

Status

Waarschuwing; op het moment van schrijven (februari 2003), ondersteunen de meeste browsers de nth-child’ selector (geïntroduceerd in november 2001) nog niet en slechts enkelen ondersteunen het COL element.

EVEN EN ONEVEN REGELS

Eén manier om de leesbaarheid van grote tabellen te verbeteren is het om en om kleuren van de rijen. Bijvoorbeeld, de onderstaande tabel heeft een lichtgrijze achtergrond voor de even rijen en een witte voor de oneven rijen. De regels hiervoor zijn extreem eenvoudig:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Month199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

In feite staat CSS niet alleen even/oneven wisselingen toe, maar ook willekeurige intervallen. De trefwoorden "even" en "oneven" zijn slechts handige snelschriften. Voor een lange lijst kunt u bijvoorbeeld dit doen:

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

Dit betekent dat elke 5de item in de lijst vet is, beginnend bij het 3de item. Met andere woorden, de items 3, 8, 13, 18, 23, etc., zullen vet zijn.

EVEN EN ONEVEN KOLOMMEN

Hetzelfde geldt ook voor tabel kolommen, maar dan moet er een element in het document zijn dat correspondeert met de kolom. HTML gebruikt hier COL voor. De tabel moet starten met één COL voor iedere kolom:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>1994<th>1995<th>1996...

(COL kan gebruikt worden voor andere dingen dan style, maar in dit geval is in ieder geval nodig dat de COL elementen aanwezig zijn.) De volgende regels geven de eerste kolom een gele achtergrond, en dan elke volgende kolom een grijze achtergrond, beginnend vanaf de 3de kolom:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
Month199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

De achtergrond van de rijen (TR) staat voor de achtergrond van de kolommen (COL), dus wanneer u wilt dat de achtergrond van de kolommen zichtbaar is, moet u geen achtergrond voor de rijen gebruiken.

CSS Valid CSS!

Bert Bos
geschreven 6 februari 2003;
laatste update datum: 07/07/2008 15:03:47 $ GMT