10 CSS Selektora Bez Kojih ne bi Trebali Kodirati


10 CSS Selektora Bez Kojih ne bi Trebali Kodirati

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.

* {
   margin: 0;
   padding: 0;
   font-family: "Times New Roman",Georgia,Serif;
   font-size: 14px;
}

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:

header + div {
   margin-top: 20px;
}

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:

<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>

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.

ul > li {
   background: blue;
   color: white;
}

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:

a[href*="facebook"] {
   color: blue;
}

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:

div:not(.footer) {
   margin-bottom: 30px;
}

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:

ul li:first-child {
   border: none;
}
ul li:last-child {
   margin-right: 0px;
}

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:

ul li:nth-child(3) {
   background: #fff;
}

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:

ul li:nth-last-child(2) {
   background: #fff;
}

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:

div p:nth-of-type(3) {
   font-style: italic;
}

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.

a:visited {
   color: blue;
}

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.

Jovan Ivezic

E-business and internet marketing specialist.

Latest posts by Jovan Ivezic (see all)

facebook
twitter
google
pinterest