Да би се таблице олакшале за читање, често је корисно стилизовати редове наизменичним бојама позадине. Један од најчешћих начина обликовања табела је постављање боје позадине сваког другог реда. Ово се често назива „зебрастим пругама“.
То можете постићи постављањем сваког другог реда помоћу ЦСС класе, а затим дефинисањем стила за ту класу. Ово функционише, али није најбољи или најефикаснији начин да се то уради. Када користите овај метод, сваки пут када треба да уредите ту табелу, можда ћете морати да уредите сваки поједини ред у табели како бисте били сигурни да је сваки ред у складу са променама. На пример, ако у табелу убаците нови ред, у сваком другом реду испод ње треба променити класу.
ЦСС олакшава обликовање столова са зебрастим пругама. Не требате додавати никакве додатке ХТМЛ атрибуте или ЦСС класе, само користите: нтх-оф-типе (н) ЦСС селектор.
Селектор: нтх-оф-типе (н) је структурна псеудо-класа у ЦСС-у која вам омогућава да стилизујете елементе на основу њихових односа са родитељским и братским елементима. Помоћу ње можете одабрати један или више елемената на основу њиховог порекла. Другим речима, може се подударати са сваким елементом који је н-то дете одређеног типа његовог родитеља.
Слово н може бити кључна реч (попут непарне или непарне), број или формула.
На пример, за обликовање сваке друге ознаке пасуса жутом бојом позадине, ваш ЦСС документ би садржао:
п: н-типа (непарно) {
позадина: жута;
}
Почните са ХТМЛ табелом
Прво створите табелу онако како бисте је иначе писали у ХТМЛ-у. Не додавајте посебне класе у редове или колоне.
У табелу стилова додајте следећи ЦСС:
тр: н-типа (непарно) {
боја позадине: #ццц;
}
Ово ће стилизовати сваки други ред сивом бојом позадине почев од првог реда.
На исти начин стилизујте наизменично колоне
Исти такав стил можете да урадите и за колоне у табелама. Да бисте то урадили, једноставно промените тр у својој ЦСС класи у тд. На пример:
тд: н-типа (непарно) {
боја позадине: #ццц;
}
Коришћење формула у селектору н-тог типа (н)
Синтакса формуле која се користи у бирачу је + б.
- а је број који представља циклус или величину индекса.
- н је уствари слово "н" и представља бројач који звезда на 0.
- + је оператор, који такође може бити "-"
- б је цео број и представља вредност помака - на пример, колико редова надоле би селектор почео да примењује боју позадине. То је потребно ако је оператор укључен у формулу.
На пример, ако желите да поставите боју позадине за сваки 3. ред, ваша формула би била 3н + 0. Ваш ЦСС може изгледати овако:
тр: н-типа (3н + 0) {
позадина: слатеграи;
}
Корисни алати за коришћење селектора н-тог типа
Ако се осећате помало запрепашћено аспектом формуле коришћења селектора н-тог типа псеудо-класе, испробајте: н-ти Тестер сајт као користан алат који вам може помоћи да дефинишете синтаксу да бисте постигли жељени изглед. У падајућем менију одаберите нтх-оф-типе (овде такође можете експериментисати и са другим псеудо-класама, као што је нтх-цхилд).