CSS Osnove

Selektor nth-child()

ul li:nth-child(4) {color:green;}

koji govori pretraživaču da pronadje element li, četvrti po redu odozgo i tekst unutar njega prikaže u zelenoj boji.

Šta ako hoćemo da manipulišemo svakim drugim elementom, parnim ili neparnim? Postoje dve službene reči koje baš to rade i njihov kod izgleda ovako:

ul li:nth-child(odd) {color:blue;}

reč odd je ključna i govori pretraživaču da pronadje sve neparne li elemente unutar taga ul i oboji ih u plavo.

Nasuprot neparnim, CSS kod koji boji u plavo sve parne li elemente izgledao bi ovako:

ul li:nth-child(even) {color:blue;}

Ono što je interesantno je da ovaj pseudo selektor ima mogućnost da se primeni na svaki n-ti element, na primer:

li:nth-child(2n) {color:pink;}

znači da se css pravilo primeni na svaki drugi li element. Izraz u zagradi, 2n, treba posmatrati kao množenje gde n uzima vrednost od 1 do beskonačno pa će tako u ovom primeru u pink boju biti obojeni li elementi 2,4,6. Osam bi bio sledeći ali lista u našem primeru ima 7 elemenata pa se brojanje tu završava.

U pomenutom izrazu 2n moguće su razne kombinacije, uključujući dodavanje ili oduzimanje broja prethodno pomenutom izrazu. Oba primera, respektivno, izgledaju ovako:

li:nth-child(2n+2) {color:pink;}

li:nth-child(2n-3) {color:pink;}

nth-child() izrazi pokrivaju gotovo svaki scenario koji vam zatreba. Zbog razumevanja, objasnićemo samo poslednje navedeni slučaj. U njemu bi za početnu vrednost n=1 u pink boju bio obojen element 1, pa zatim element broj 3, pa 5 i na kraju 7.

Pored ovih, moguće je koristiti i selektor:

li:first-child {font-size:20px;}

Selektor iznad govori pretraživaču da veličinu teksta unutar svakog prvog li elementa u listi promeni na 20px. Nasuprot tome:

li:last-child

selektovao bi poslednji li element u okviru liste.

Postoje i dva zanimljiva pseudo selektora koja su zadužena za dodavanje odredjenog teksta ispred ili iza nekog elementa. Pogledajmo primer:

p:before{content:”Pročitaj ovo: “;}

govori pretraživaču da ispred svakog p taga, tj. pre nego ispiše tekst unutar p taga, ispiše tekst “Pročitaj ovo:” i nastavi sa ispisivanjem teksta definisanog unutar paragrafa koji sledi. Pseudo selector :after radi istu stvar samo što tekst atributa content zapisuje nakon sto ispiše tekst unutar paragrafa.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn