Web Style Sheets
CSS съвети и трикове

Статус

Внимание: по време на написването (февруари 2003) на документа, повечето браузъри все още не поддържаха 'nth-child' селектор (представен през ноември 2001) и само някои поддържаха елемента COL.

Четни и нечетни правила

Един от начините да се подобри четимостта на големи таблици е редуващите се редове да се оцветят в различни цветове. Например, следващата таблица светлосив фон за четните редове и бял фон за нечетните. Правилата за това са много лесни:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Месец	1994	1995	1996	1997	1998	1999	2000	2001	2002
Яну	14	13	14	13	14	11	11	11	11
Фев	13	15	12	15	15	12	14	13	13
Мар	16	15	14	17	16	15	14	15	15
Апр	17	16	17	17	17	15	15	16	16
Май	21	20	20	21	22	20	21	20	19
Юни	24	23	25	24	25	23	25	23	24
Юли	29	28	26	26	27	26	25	26	25
Авг	29	28	27	28	28	27	26	28	26
Сеп	24	23	23	26	24	24	24	22	21
Окт	20	22	20	22	20	19	20	22
Ное	18	17	16	17	16	15	14	15
Дек	15	13	13	14	13	10	13	11

На практика, CSS позволява редуване не само на четно/нечетно, но и на определени интервали. Ключовите думи 'even' и 'odd' са само удобни за писани. например, за по-дълъг списък може да се използва:

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

Това указва, че всеки 5ти елемент от списъка е bold, започвайки от третия. С други думи, елементите с номера 3, 8, 13, 18, 23, и т.н., ще бъдат bold.

Четни и нечетни колони

Същото важи и за колоните в таблица, но тогава трябва да има елемент в документа съответстващ на колона. HTML предоставя за това елемента COL. Таблицата трябва да започне с по един COL за всяка от колоните:

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

(COL може да се прилага и за други цели освен стил, но в този случай всичко, което ни е необходимо е да присъстват COL елементите.) Следните правила задават на първата колона жълт фон и сив фон за всяка друга колона след колона 3:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Месец	1994	1995	1996	1997	1998	1999	2000	2001	2002
Яну	14	13	14	13	14	11	11	11	11
Фев	13	15	12	15	15	12	14	13	13
Мар	16	15	14	17	16	15	14	15	15
Апр	17	16	17	17	17	15	15	16	16
Май	21	20	20	21	22	20	21	20	19
Юни	24	23	25	24	25	23	25	23	24
Юли	29	28	26	26	27	26	25	26	25
Авг	29	28	27	28	28	27	26	28	26
Сеп	24	23	23	26	24	24	24	22	21
Окт	20	22	20	22	20	19	20	22
Ное	18	17	16	17	16	15	14	15
Дек	15	13	13	14	13	10	13	11

Фонът на редовете (TR) се изобразява пред фона на колоните (COL), така че ако искате да сте сигурни, че фона на колоните Ви ще е видим, не задавайте фон на редовете.