За да направите таблиците по-лесни за четене, често е полезно да оформите редове с редуващи се цветове на фона. Един от най-често срещаните начини за стилизиране на таблици е задаването на цвета на фона на всеки друг ред. Това често се нарича „ивици на зебра“.
Можете да постигнете това, като зададете всеки друг ред с CSS клас и след това дефинирате стила за този клас. Това работи, но не е най-добрият или най-ефективният начин да го направите. Когато използвате този метод, всеки път, когато трябва да редактирате тази таблица, може да се наложи да редактирате всеки отделен ред в таблицата, за да сте сигурни, че всеки ред съответства на промените. Например, ако вмъкнете нов ред в таблицата си, всеки друг ред под него трябва да промени класа.
CSS улеснява оформянето на маси с ивици зебра. Не е нужно да добавяте допълнително HTML атрибути или CSS класове, просто използвате: nth-of-type (n) CSS селектор.
Селекторът: nth-of-type (n) е структурен псевдоклас в CSS, който ви позволява да стилизирате елементи въз основа на връзките им с родителски и сестрински елементи. Можете да го използвате, за да изберете един или повече елементи въз основа на техния ред на източника. С други думи, той може да съответства на всеки елемент, който е n-то потомство на определен тип негов родител.
Буквата n може да бъде ключова дума (като нечетна или четна), число или формула.
Например, за да оформите всеки друг маркер на абзац с жълт цвят на фона, вашият CSS документ ще включва:
p: n-ти тип (нечетен) {
фон: жълт;
}
Започнете с вашата HTML таблица
Първо, създайте таблицата си, както обикновено я пишете в HTML. Не добавяйте специални класове към редовете или колоните.
Във вашия лист със стилове добавете следния CSS:
tr: n-ти тип (нечетен) {
фон-цвят: #ccc;
}
Това ще оформи всеки втори ред със сив цвят на фона, започвайки с първия ред.
Оформете редуващи се колони по същия начин
Можете да направите същия вид стилизиране на колони във вашите таблици. За да направите това, просто променете tr във вашия CSS клас на td. Например:
td: n-ти тип (нечетен) {
фон-цвят: #ccc;
}
Използване на формули в n-ти от типа (n) селектор
Синтаксисът за формула, използвана в селектора, е + b.
- a е число, което представлява размера на цикъла или индекса.
- n всъщност е буквата "n" и представлява брояч, който е на 0.
- + е оператор, който също може да бъде "-"
- b е цяло число и представлява стойността на отместването - например колко реда надолу трябва да започне селекторът да прилага цвета на фона. Това се изисква, ако във формулата е включен оператор.
Например, ако искате да зададете цвят на фона за всеки 3-ти ред, вашата формула ще бъде 3n + 0. Вашият CSS може да изглежда така:
tr: n-ти тип (3n + 0) {
фон: slategray;
}
Полезни инструменти за използване на n-ти от типа селектор
Ако се чувствате малко обезсърчени от аспекта на формулата при използване на псевдокласния n-ти тип селектор, изпробвайте: n-тия тестер като полезен инструмент, който може да ви помогне да определите синтаксиса, за да постигнете желания външен вид. Използвайте падащото меню, за да изберете nth-of-type (тук можете да експериментирате и с други псевдокласове, например nth-child).