Korišćenje: nth-of-type (n) sa tabelama
Da bi se tablice lakše čitale, često je korisno stajati redove sa promenljivim bojama pozadine. Jedan od najčešćih načina stila tablica je postavljanje boje pozadine svakog drugog reda. Ovo se često naziva "zebra prugama".
To možete postići podešavanjem svakog drugog reda pomoću CSS klase i definiranjem stila za tu klasu. Ovo funkcioniše, ali nije najbolji ili najefikasniji način za to.
Prilikom korišćenja ovog metoda, svaki put kada treba da uređujete tu tablicu, možda ćete morati da izmenite svaki red u tablici kako biste bili sigurni da je svaki red u skladu sa promenama. Na primjer, ako ubacite novi red u vašu tabelu, svaki drugi red ispod njega mora promijeniti klasu.
CSS olakšava stajanje tablica sa zebra prugama. Ne morate dodavati dodatne HTML atribute ili CSS klase, samo koristite: nth-of-type (n) CSS selektor .
: Nth-of-type (n) selektor je strukturna pseudo-klasa u CSS-u koja vam omogućava da oblikujete elemente zasnovane na njihovim odnosima sa roditeljima i sestrama. Možete ga koristiti za odabir jednog ili više elemenata na osnovu njihovog izvora. Drugim rečima, može se podudarati sa svakim elementom koji je nth dijete određene vrste njegovog roditelja.
Pismo n može biti ključna reč (kao čudno ili čak), broj ili formula.
Na primer, da biste stvorili svaku drugu oznaku pasusa sa žutom bojom pozadine, vaš CSS dokument bi uključio:
p: nth-of-type (čudno) {
pozadina: žuto;
}
Počnite sa HTML tablicom
Prvo, kreirajte svoju tablicu kao što biste normalno napisali u HTML-u. Ne dodajte posebne redove u redove ili stupce.
Na svojoj listi stilova dodajte sledeći CSS:
tr: nth-of-type (čudno) {
pozadina: #ccc;
}
Ovo će stvoriti svaki drugi red sivom bojom pozadine počevši od prvog reda.
Stil Alternativni kolone na isti način
Istu vrstu stila možete učiniti kolonama u vašim stolovima. Da biste to uradili, jednostavno promenite tr u svojoj CSS klasi na td. Na primjer:
td: nth-of-type (čudno) {
pozadina: #ccc;
}
Korišćenje formula u nth-of-type (n) selektoru
Sintaksa za formulu koja se koristi u selektoru je + b.
a je broj koji predstavlja veličinu ciklusa ili indeksa.
n je zapravo slovo "n" i predstavlja brojač, koji se prikazuje na 0.
+ je operator koji može biti "-"
b je ceo broj i predstavlja vrednost ofset-na primer, koliko redova bi trebalo da birač selektora primenio boju pozadine. Ovo je potrebno ako je operater uključen u formulu.
Na primjer, ako želite postaviti boju pozadine za svaki treći red, vaša formula bi bila 3n + 0. Vaš CSS može izgledati ovako:
tr: nth-of-type (3n + 0) {
pozadina: slategray;
}
Korisni alati za korišćenje nth-of-Select bita
Ako se osećate malo zastrašeno po aspektu korišćenja pseudo-klase nth-of-type selektora, pokušajte: nth Tester sajt kao koristan alat koji vam može pomoći da definišete sintaksu da biste postigli izgled koji želite. Pomoću padajućeg menija izaberite nth-of-type (takođe možete eksperimentisati i sa drugim psevdoklasama, kao što je nth-child).