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:
PreuzmiIzvorni kd (CSS): *
*{
margin: 0;
padding: 0;
}
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:
PreuzmiIzvorni kd (CSS):.mojaklasa
{
color: red;
}
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>
PreuzmiIzvorni kd (CSS):#super_link{
padding: 1em;
}
Odnosi se na sve HTML elemente koji sadrže atribut “href”.
<a href="http://neka_stranica.com"<</a>
PreuzmiIzvorni kd (CSS):a[href]{
font-size: 1.5em;
}
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.
PreuzmiIzvorni kd (CSS):a[href*="str"]{
color: black;
}
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>
Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.