Web Style Sheet
CCS savjeti i trikovi

Status

Upozorenje: u vrijeme pisanja (veljača 2003.), vodeći preglednici još uvijek ne podržavaju 'nth-child' selector (uveden studena 2001.) i samo mali broj preglednika podržava COL element.

Parna I neparna pravila

Jedan od načina da se olakša čitanje tabela je bojenje naizmjeničnih redaka. Primjerice, donja tabela ima svijetlo sivi zaslon za parne redke I bijeli zaslon za neparne redke. Pravila za ovo su krajnje jednostavna:

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

Zapravo, CSS dopušta ne samo parna/neparna izmjenjivanja već i proizvoljne intervale. Ključne riječi "even" (parni) i "odd" (neparni) su samo prikladne prečice. Primjerice, za dugačke liste možete uraditi ovo:

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

Ovo znači da je svaki 5. podatak tabele podebljan, počevši od trećega. Drugim riječima, podaci pod brojevima 3, 8, 13, 18, 23, itd. bit će podebljani.

Parni I neparni stupci

Isto važi i za stupce tabela, ali se mora imati element koji odgovara stupcima. HTML za to pruža COL. Tabela mora početi sa jednim COL za svaki stupac:

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

(COL se može koristiti za druge stvari osim za style, u ovom slučaju sve što nam treba je da je COL prisutno.) Naredna pravila daju prvome stupcu žuti zaslon, a zatim je svaki treći stupac sive boje počevši od trećega stupca:

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

Zaslon redova (TR) je nacrtan isprijed zaslona za stupce (COL), te ako želite biti sigurni da je zaslon stupaca vidljiv, onda ne se treba odrediti zaslon za redke.