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