Svaki put kada koristimo CSS, koristimo selektore. Ali uprkos tome, CSS selektori su jedan od najviše zapostavljenih delova specifikacije.
Često govorimo o velikim transformacijama u CSS-u, a zaboravljaju se osnove. Pravilna upotreba selektora čini naše svakodnevno kodiranje jednostavnijim i elegantnijim.
Danas ćemo objasniti 10 CSS selektora koji možda nisu toliko zastupljeni, ali su veoma efikasni i upotrebljivi.
*
* selektor je jedan od selektora koje je najlakše zapamtiti, ali se retko upotrebljava. Ono što on radi je stilizovanje svih elemenata na stranici i odličan je za kreiranje reset-a i nekih podrazumevanih podešavanja za kao što je font family i veličina fonta.
[css gutter=“false“]
* {
margin: 0;
padding: 0;
font-family: „Times New Roman“,Georgia,Serif;
font-size: 14px;
}
[/css]
A+B
Ovaj selektor se često zove susedni i njegova funkcija je da izabere element koji je odmah posle prvog elementa. Ako želite da selektujete prvi div posle vašeg headera kod bi izgledao ovako:
[css gutter=“false“]
header + div {
margin-top: 20px;
}
[/css]
A > B
Ovaj selektor će selektovati samo direktnog potomka (children) za razliku A B koji selektuje sve nivoe potomaka A. Upotreba ovoga selektora se preporučuje kada radimo sa naslednicima prvog nivoa elementa roditelja. Na primer ako želite da selektujete prvi nivo elemenata u neuređenoj listi koja izgleda ovako:
[html gutter=“false“]
<ul>
<li>Element liste sa ul
<ul>
<li>Ugnezdena lista</li>
<li>Ugnezdena lista</li>
<li>Ugnezdena lista</li>
</ul>
</li>
<li>Element liste</li>
<li>Element liste</li>
</ul>
[/html]
Treba da koristite ovaj selektor zbog toga što kada bi koristili uobičajni A B selektor, izabrali bi takođe i elemente unutar ugnježdene liste.
[css gutter=“false“]
ul > li {
background: blue;
color: white;
}
[/css]
A[href*=“primer“]
Ovo je zaista dobar selektor kada želite da stilizujete određeni link na drugačiji način, šta god da je u navodnicima će biti obuhvaćeno ovim pravilom. Na primer, da bi stilizovali sve linkove koji vode na facebook sa plavom bojom koristili bi sledeće pravilo:
[css gutter=“false“]
a[href*=“facebook“] {
color: blue;
}
[/css]
Postoji takođe verzija bez *koja se odnosi na specifičan URL koju možete koristiti za tačne linkove.
A:not(B)
Ovaj selektor je naročito koristan zbog uslova negacije koji dozvoljava da selektujete bilo koju grupu elemenata koja ne odgovara onome sto ste naveli u B. Ako želite da selektujete svaki div osim futera to možete uraditi na sledeći način:
[css gutter=“false“]
div:not(.footer) {
margin-bottom: 30px;
}
[/css]
A:first-child / A:last-child
first-child i last-child omogućavaju nam da selektujemo prvi i zadnji potomak roditeljskog elementa. Ovo može biti od koristi kada se radi o elementima liste i uklanjanju desne margine ili ivica (border). Da bi uklonili ivicu na prvom elementu i marginu na zadnjem elementu potrebno je:
[css gutter=“false“]
ul li:first-child {
border: none;
}
ul li:last-child {
margin-right: 0px;
}
[/css]
A:nth-child(n)
nth-child je jednostavna način da selektujete bilo koji potomak elementa prema njegovom redosledu. Ako na primer želite da oblikujete treći element u neuređenoj listi ovo je najlakši način da to postignete:
[css gutter=“false“]
ul li:nth-child(3) {
background: #fff;
}
[/css]
A:nth-last-child(n)
nth-last-child radi kao nth-child, ali umesto da počinje brojanje sa početka liste on ide sa kraja, pa ako ga koristite sa brojem dva selektovaće element u listi koji ide pre zadnjeg:
[css gutter=“false“]
ul li:nth-last-child(2) {
background: #fff;
}
[/css]
A:nth-of-type(n)
Ovaj selektor radi upravo ono što i pretpostavljate; gleda koji tip elementa ste odabrali i selektuje ga. Na primer, treći element na stranici koji odgovara onome što ste odabrali. Da bi selektovali treći paragraf u div-u koristili bi:
[css gutter=“false“]
div p:nth-of-type(3) {
font-style: italic;
}
[/css]
A:visited
Sigurno ste primetili da kada nešto tražite na Google, stranice koje ste već posetili su drugačije boje? To je ono što ovaj selektor radi. Ovo je odličan dodatak za posetioce, da bi stekli uvid u linkove koje su već posetili.
[css gutter=“false“]
a:visited {
color: blue;
}
[/css]
Zaključak
Prema našem iskustvu upotreba ovih vrsta selektora pri kodiranju može da uštedi dosta vremena i smanji potrebu za velikim brojem ID-ova koji stvaraju zbrku u označavanju. Ovo je samo početak što se tiče CSS selektora, postoji još puno njih koji su veoma zgodni za upotrebu, ali ponekad zaboravljeni.
