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