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