Оглавление

Взгляд в будущее

Добавлять имя класса для каждого второго ряда довольно утомительно, и вы не ошиблись, если задумались о наличии альтернативного решения той же самой задачи. Эффекта чередования можно достичь исключительно средствами CSS. Надо отметить, что этот метод гораздо эффективнее. Воспользовавшись селектором псевдокласса CSS3 :nth-child, можно выбрать все четные или нечетные ряды таблицы, ничего не меняя в HTML-разметке. Наступят времена, когда все броузеры будут поддерживать этот псевдокласс, и жизнь разработчиков на CSS станет гораздо проще. Понять механизм функционирования этого псевдокласса достаточно сложно, поэтому рекомендую вам обратиться к справочной документации CSS Reference, в которой он прекрасно представлен.

 

С помощью данного селектора псевдокласса можно выбирать элементы в зависимости от количества предшествующих ему элементов того же уровня.

 

Вернемся к изначальному коду таблицы до добавления имени класса для рядов. Можно обратиться ко всем четным рядам таблицы с помощью следующего CSS-кода:


.datatable tr:nth-child(2n) {
background-color: #DFE7F2;
color: #000000;
}


Для обращения ко всем нечетным рядам можно использовать следующий CSS-код:


.datatable tr:nth-child(2n+1) {
background-color: #E8EBEF;
color: #000000;
}


Содержащиеся в данном селекторе числовые выражения могут показаться замысловатыми, но, к счастью, разработчикам настолько часто приходится выполнять подобную задачу, что в спецификации CSS3 был описан более простой синтаксис. Вместо числовых выражений в скобках можно использовать ключевые слова:


  .datatable tr:nth-child(even) {
	background-color: #DFE7F2;
	color: #000000;
}
.datatable tr:nth-child(odd) {
	background-color: #E8EBEF;
	color: #000000;
}

чередование строк с помощью CSS3

Рис. 60. Чередование строк при  помощи CSS3


На момент написания данной книги эти примеры обрабатывались последними версиями Firefox, Opera, Chrome, Safari и IE9.

Вы можете проверить свой браузер, пройдя по ссылке.

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити