Чтобы таблицы было легче читать, часто бывает полезно стилизовать строки с чередующимися цветами фона. Один из наиболее распространенных способов стилизации таблиц - установить цвет фона для каждой второй строки. Это часто называют «полосами зебры».
Вы можете добиться этого, установив каждую вторую строку с помощью класса CSS, а затем определив стиль для этого класса. Это работает, но это не лучший и не самый эффективный способ сделать это. При использовании этого метода каждый раз, когда вам нужно отредактировать эту таблицу, вам, возможно, придется редактировать каждую отдельную строку в таблице, чтобы убедиться, что каждая строка соответствует изменениям. Например, если вы вставляете новую строку в свою таблицу, для каждой второй строки под ней необходимо изменить класс.
CSS позволяет легко стилизовать таблицы с полосами зебры. Вам не нужно добавлять никаких дополнительных HTML атрибуты или классы CSS, вы просто используете: nth-of-type (n) Селектор CSS.
Селектор: nth-of-type (n) - это структурный псевдокласс в CSS, который позволяет вам стилизовать элементы на основе их отношений с родительскими и родственными элементами. Вы можете использовать его для выбора одного или нескольких элементов в зависимости от их исходного порядка. Другими словами, он может соответствовать каждому элементу, который является n-м дочерним элементом определенного типа своего родителя.
Буква n может быть ключевым словом (например, нечетным или четным), числом или формулой.
Например, чтобы стилизовать все остальные теги абзацев с желтым цветом фона, ваш документ CSS должен включать:
p: nth-of-type (odd) {
фон: желтый;
}
Начните с HTML-таблицы
Сначала создайте свою таблицу, как вы обычно пишете ее в HTML. Не добавляйте никаких специальных классов к строкам или столбцам.
В свою таблицу стилей добавьте следующий CSS:
tr: nth-of-type (odd) {
цвет фона: #ccc;
}
При этом каждая вторая строка будет окрашена в серый цвет фона, начиная с первой строки.
Точно так же стилизуйте чередующиеся столбцы
Вы можете применить такой же стиль к столбцам в таблицах. Для этого просто измените tr в своем классе CSS на td. Например:
td: nth-of-type (odd) {
цвет фона: #ccc;
}
Использование формул в селекторе n-го типа (n)
Синтаксис формулы, используемой в селекторе, - an + b.
- a - число, которое представляет размер цикла или индекса.
- На самом деле n - это буква «n», обозначающая счетчик с нулевой звездочкой.
- + - оператор, который также может быть "-"
- b является целым числом и представляет значение смещения - например, на сколько строк вниз селектор должен начать применять цвет фона. Это необходимо, если в формулу включен оператор.
Например, если вы хотите установить цвет фона для каждой третьей строки, ваша формула будет 3n + 0. Ваш CSS может выглядеть так:
tr: nth-of-type (3n + 0) {
фон: сланцевый;
}
Полезные инструменты для использования селектора nth-of-type
Если вас немного пугает аспект формулы использования селектора псевдокласса nth-of-type, попробуйте сайт: nth Tester как полезный инструмент, который может помочь вам определить синтаксис для достижения желаемого внешнего вида. Используйте раскрывающееся меню, чтобы выбрать nth-of-type (вы также можете поэкспериментировать с другими псевдоклассами, такими как nth-child).