Centar za edukaciju-BiH

Predmet:CSS selektori

---

Selektor (od engleskog selector) - sortiranje, odabir. Pod CSS odabirom podrazumijevamo način odabira elemenata stranice.
U selektoru se mogu koristiti nazivi, klase ili identifikatori elemenata.
Glavne vrste CSS selektora
1. Selektor oznaka - odaberite element stranice prema nazivu.
2. Selektor klase - odaberite element stranice prema nazivu svoje klase.
3. Odabir id - odaberite element stranice prema nazivu njegovog jedinstvenog identifikatora

Univerzalni selektor
U CSS kodu, univerzalni selektor se pise zvjezdica *
Sa univerzalnim CSS selektorom se postavljaju svojstava na sve elemente stranice odjednom.
Obično se koristi za poniÅ¡tavanje uvlačenja elemenata, na primjer:
Naziv elementa
Najjednostavniji selektor je upravo naziv elementa. Želi li se da se
pravilo odnosi na p elemente, napisat će se:

Klasa
Često je potrebno da se CSS-pravilo primijeni samo na točno određene
HTML-elemente. Da bi se to postiglo, u HTML-u te elemente treba
označiti klasom određenog imena, upotrebom atributa class:
<p class="mojaklasa">
Moj tekst sa klasom
</p>
Kada se u selektoru navodi klasa, obavezno se prije imena klase mora
staviti točka:
Ovo vrijedi samo za elemente kjlase mojaklasa.

Identifikator
Osim pomoću klase, HTML-elementi mogu se označiti i identifikatorom
pomoću atributa id.
Kada se u selektoru koristi identifikator, prije identifikatora se mora
navesti oznaka #, kao u primjeru:
Ovo pravilo primijenit će se samo na element s identifikatorom jutro.
Identifikator treba biti jedinstven – na istoj HTML-stranici ne bi trebalo
dva puta upotrijebiti isti identifikator.
Kod klasa nema tog ograničenja – ista se klasa može upotrijebiti samo
jednom, a možemo se upotrijebiti i više puta.

Nazivi elementa, klase i identifikatora se mogu kombinovati.
Primjeri:
p.prvaklasa.drugaklasa
{
color: red;
}
p#nekaklasa
{
color: red;
}
<a id="super_link" class="klasa_linkovi" href="http://neka_stranica.com"<</a>
Odnosi se na sve HTML elemente koji sadrže atribut “href�.
<a href="http://neka_stranica.com"<</a>

Ovaj selektor je specifičniji od prethodnog jer pored toga Å¡to targetira element koji ima odredjeni atribut, mora da sadrži odredjeni znakovni niz u okviru vrijednosti atributa. Ovaj dio nemora da bude riječ, dovoljno je da bude i dio neke riječi.

U prethodnom primeru se slektuje element koji ima atribut link i vrednost tog atributa mora da sadrži znakovni niz str.
Sa ovakvim selektorom bi bio izabran i sledeći element:
<a href="http://neka_stranica.com"<</a>

---