Користење: nth-of-type (n) со табели
За полесно читање на табелите, често е корисно да се редат редови со наизменични бои на заднината. Еден од најчестите начини за стил на табели е да ја поставите бојата на позадината на секој друг ред. Ова често се нарекува "зебра ленти".
Ова може да го постигнете со поставување на секој друг ред со CSS класа, а потоа дефинирање на стилот за таа класа. Ова функционира, но не е најдобриот или најефикасниот начин да се направи тоа.
Кога го користите овој метод, секогаш кога ќе треба да ја уредите табелата, можеби ќе треба да го уредите секој ред во табелата за да се осигурате дека секој ред е во согласност со промените. На пример, ако внесете нов ред во вашата табела, секој друг ред под него треба да ја смени класата.
CSS го олеснува стилувањето на табелите со ленти од зебра. Не треба да додавате дополнителни HTML атрибути или CSS класи, туку едноставно користете: nth-of-type (n) CSS селектор .
Селекторот nth-of-type (n) е структурна псевдокласа во CSS која ви овозможува да ги стимулирате елементите врз основа на нивните врски со родителските и братските елементи. Можете да го користите за да изберете еден или повеќе елементи врз основа на нивниот извор. Со други зборови, тој може да одговара на секој елемент кој е nth дете на одреден тип на родител.
Буквата 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;
}
Користење на формулите во nth-of-type (n) селектор
Синтаксата за формулата што се користи во селекторот е + b.
a е број кој ја претставува големината на циклусот или индексот.
n всушност е буквата "n" и претставува бројач, кој ѕвезди на 0.
+ е оператор, кој исто така може да биде "-"
b е цел број и ја претставува офсетната вредност - на пример, колку редови надолу треба да селекторот започне со примена на бојата на позадината. Ова е потребно ако операторот е вклучен во формулата.
На пример, ако сакате да поставите боја на позадина за секој трет ред, вашата формула ќе биде 3n + 0. Вашиот CSS може да изгледа вака:
tr: nth-of-type (3n + 0) {
позадина: slategray;
}
Корисни алатки за користење на nth-of-type селектор
Ако се чувствувате малку застрашен од формулата аспект на користење на псевдо-класа nth-of-type селектор, обидете се на: nth Tester сајт како корисна алатка која може да ви помогне да ја дефинирате синтаксата за да го постигнете изгледот што го сакате. Користете го паѓачкото мени за да одберете nth-of-type (исто така можете да експериментирате со други псевдокласи, исто така, како што е nth-child).