Приднестровская поддержка XOOPS
Добавлять имя класса для каждого второго ряда довольно утомительно, и вы не ошиблись, если задумались о наличии альтернативного решения той же самой задачи. Эффекта чередования можно достичь исключительно средствами 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; }
Рис. 60. Чередование строк при помощи CSS3
На момент написания данной книги эти примеры обрабатывались последними версиями Firefox, Opera, Chrome, Safari и IE9.
Вы можете проверить свой браузер, пройдя по ссылке.
Отправитель | Нити |
---|
4 пользователь(ей) активно (3 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 4 далее... |