Web Style Sheets
CSS TIPS & TRUCS

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}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

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}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

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.