zxz 27.04.2020 09:35
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):
  1.  *
  2. *{
  3.   margin: 0;
  4.   padding: 0;
  5. }
Naziv elementa
Najjednostavniji selektor je upravo naziv elementa. Želi li se da se
pravilo odnosi na p elemente, napisat će se:
PreuzmiIzvorni kd (CSS):
  1. p
  2. {
  3. color: red;
  4. }

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):
  1. .mojaklasa
  2. {
  3. color: red;
  4. }
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:
PreuzmiIzvorni kd (CSS):
  1. #idklasa
  2. {
  3. color: red;
  4. }
PreuzmiIzvorni kd (HTML):
  1. <p id="idklasa">
  2.  Ovo je id klasa.
  3. </p>
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):
  1. #super_link{
  2.    padding: 1em;
  3. }
Odnosi se na sve HTML elemente koji sadrže atribut “href”.
<a href="http://neka_stranica.com"<</a>
PreuzmiIzvorni kd (CSS):
  1. a[href]{
  2.    font-size: 1.5em;
  3. }

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):
  1. a[href*="str"]{
  2.   color: black;
  3. }
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>