Tipovi selektora
CSS selektori su deo CSS synatax-e, koji odredjuju HTML elemente na koje će se primeniti CSS pravila.
Univerzalni selektor
Univerzalni selektor se obeležava * (zvezdom), i njegova osobina je da selektuje sve elemente. Ovaj selektor se obično koristi kada se radi resetovanje stilova.
Primer
1 2 3 4 |
*{ margin: 0; padding: 0; } |
Definisani sa tipom HTML elementa
Ovo su najjednostavniji selektori i definišu se nazivom HTML elementa koji targetiraju.
Primer
1 2 3 4 5 |
p { margin-right: 0rem; padding-right: 0.5rem; text-align: justify; } |
ili
1 2 3 4 5 |
blockquote { margin-left: $leva_margina; color: #1c6c9f; font-weight: 100; } |
Definisani sa klasom elementa
Ovi selektori “gadjaju” HTML elemente koji sadrže odredjenu klasu.
Primer
1 |
<a id="super_link" class="klasa_linkovi" href="http://neka_stranica.com"<</a> |
Selektor koji targetira klasu se obeležava sa . (tačkom) ispred imena klase.
1 2 3 |
.klasa_linkovi{ color: red; } |
Definisani sa ID-om elementa
Ovi selektori “gadjaju” HTML elemente koji sadrže odredjeni ID. Obeležavaju se # znakom ispred naziva ID.
Primer
1 |
<a id="super_link" class="klasa_linkovi" href="http://neka_stranica.com"<</a> |
Selektor koji targetira element sa odredjenim ID-om se obeležava sa znakom # ispred ID-a.
1 2 3 |
#super_link{ padding: 1em; } |
Definisani sa atributom elementa
HTML elementi često sadrže atribute, pa je zgodno da se oni koriste za izbor elementa na koji treba primeniti neki stil. Selektor koji targetira neki element atributom se obeležava [ ]uglastim zagradama.
1 |
<a href="http://neka_stranica.com"<</a> |
[attribute]
Selektor u sledećem primeru se odnosi se na sve HTML elemente koji sadrže atribut “href”.
Primer
1 2 3 |
a[href]{ font-size: 1.5em; } |
[attribute*=”value”]
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 vrednosti atributa. Ovaj deo nemora da bude reč, dovoljno je da bude i deo neke reči.
Primer
1 2 3 |
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:
1 |
<a href="http://neka_stranica.com"<</a> |
[attribute~=”value”]
Ovaj selektor je specifičniji od prethodnog jer pored toga što targetira element koji ima odredjeni atribut, mora da sadrži celu željenu reč u okviru vrednosti atributa. Ta reč mora biti odvojena sa “whitespace.
Primer
1 2 3 |
a[rel~="prati"]{ color: black; } |
Ovaj selektor bi izabrao sledeći element:
1 |
<a rel="uvek prati" href="http://neka_stranica.com"<</a> |
[attribute|=value]
Ovaj selektor je sličan prethodnom jer atribut mora da sadrži celu željenu reč u okviru vrednosti atributa ali je ta reč razdovojena sa | vertikalnom linijom.
Primer
1 2 |
a[lang|="en"] { color:red;} |
Prethodni selektor bi izabrao sledeći element:
1 |
<a lang="en-US" href="http://neka_stranica.com"<</a> |
[attribute^=value]
Ovaj selektor odabira element čiji atribut počinje sa odredjenim znakovnim nizom.
Primer
1 2 3 |
a[src^="https"]{ color:black; } |
Pa prethodni selektor bi mogao da izabere sledeći element čiji atribut href počinje sa http://:
1 |
<a href="https://neka_stranica.com"<</a> |
[attribute$=value]
Ovaj selektor odabira element čiji atribut se završava sa odredjenim znakovnim nizom.
1 2 3 |
a[href$=".com"]{ color:black; } |
Prethodni selektor bi izabrao sledeći element:
1 |
<a href="http://neka_stranica.com"<</a> |
Primer
Na sledećem primeru je prikazano korišćenje selektora koji su bazirani na atributima i omogućavaju dodavanje odgovarajuće ikone u zavisnosti od vrste dokumenta:
See the Pen Attribute Selectors by ProSystem Studio (@chos) on CodePen.
[attribute=”value”]
Ovaj selektor je specifičniji od svih prethodnih jer selektuje sve elemente koji imaju odredjeni atribut i on mora imati tačnu traženu vrednost. U sledećem primeru selektovaćemo link element koji ima atribut href i taj atribut ima vrednost http://neka_stranica.com
Primer
1 2 3 |
a[href="http://neka_stranica.com"]{ color: black; } |
Pseudo klase – dinamičke
Pseudo klasa stanja je način selekcije dela HTML dokumenta koji uključuje i dinamičko stanje elementa. Syntax-a pseudo klase da se naziv pseudo klase “lepi” za drugi selektor (selektor:pseudo-klasa).
:visited
Ova pseudo klasa selektuje linkove koji su već posećeni.
Primer
1 |
a:visited {color: red;} |
:link
Ova pseudo klasa selektuje linkove nisu posećeni.
Primer
1 |
a:link {color: red;} |
:hover
Ova pseudo klasa selektuje bilo koji elemenat (ne samo link!) iznad koga se nalazi pokazivač.
Primer
1 |
a:hover { color:red; } |
:focus
Ova pseudo klasa selektuje elemenat u fokusu. Fokus je isto što i hover ali kada se koristi tastaura za navigaciju kroz stranicu. Dobar primer elementa u fokusu je input polje HTML forme.
Primer
1 |
input:focus { color: red; } |
:active
Ova pseudo klasa targetira element u kada je aktivan. Element je aktivan u vremenu kad se klikne na njega pa sve do trenutka kad se pusti dugme na mišu.
Primer
See the Pen :active state by ProSystem Studio (@chos) on CodePen.
:enabled
Ova pseudo klasa selektuje elemenat koji je enabled stanju tj. dostupno je za rad sa njim. Elementi koji imaju ovo stanje su: <input<, <select>, <textarea<, <optgroup>, <option<, <fieldset>. Najčešće se koristi uz input tag unutar neke forme.
Primer
U ovom primeru targetiramo label element posle input polja koje je dostupno za unos podataka.
1 |
input:enabled { color: #22AA22;} |
::disabled
Ova pseudo klasa selektuje elemenat koji je specifičnom disabled stanju kada element nije aktivan tj. nedostupan je za unos. Primer ne selektovano inuput polje.
Primer
1 |
input:disabled { color: #22AA22;} |
Primer korišćenja :enabel & :disable
See the Pen :enable by ProSystem Studio (@chos) on CodePen.
:checked
Ova pseudo klasa selektuje elemenat koji su specifičnom checked stanju. Stanje checked se obično vezuje za:
- radio dugme (<input type=”radio”>)
- checkbox (<input type="checkbox">)
- option (<option> in a <select>)
Primer
See the Pen :checked by ProSystem Studio (@chos) on CodePen.
Pseudo klase – pozicione
:first-child
Ova pseudo klasa selektuje prvi elemenat unutar nadredjenog elementa tj. bira bilo koji tip elementa koji je prvo dete unutar roditeljskog elementa.
Primer
See the Pen :first-child by ProSystem Studio (@chos) on CodePen.
:last-child
Ova pseudo klasa se isto ponaša kao prethodna stim što selektuje poslednje dete u roditeljskom elementu.
:nth-child(n)
Ova pseudo klasa selektuje svako n-to dete roditeljskog elementa.
See the Pen CSS-Tricks: :nth-child by ProSystem Studio (@chos) on CodePen.
:nth-last-child(n)
Ova pseudo klasa selektuje elemente gledano od nazad!
Primer
Na sledećem primeru selektovaćemo posledanja četri reda neke tabele:
1 |
tr:nth-last-child(-n+4) |
Primer
Na sledećem primeru selektujemo svaki paran element ali startujući “od kraja ka napred”
1 |
span:nth-last-child(even) |
:first-of-type
Ova pseudo klasa selektuje prvi elemenat unutar nadredjenog elementa ali odredjenog tipa. Ovo je bitno ukoliko zajednički roditelj sadrži različite elemente unutar sebe.
1 2 3 4 5 6 |
<article> <h1>A Title</h1> <p>Ovaj paragraf targetiramo </p> <p>Paragraph 2.</p> <p>Paragraph 3.</p> </article> |
Ukoliko želimo da selektujemo prvi paragraf onda koristimo:
1 |
p:first-of-type { font-size: 1.25em; } |
Napomena:
selektor p:first-child u ovome slučaju ne bi radio posao jer paragraf nije provo dete svoga roditelja pošto postoji drugi tip unutar roditelja <article> koji je ispred paragrafa.
:last-of-type
Ova pseudo klasa se isto ponaša kao prethodna stim što selektuje poslednje dete u roditeljskom elementu.
:nth-of-type(n)
Ova pseudo klasa selektuje svaki n-to dete odredjenog tipa u roditeljskom elementu.
:nth-last-of-type(n)
Ova pseudo klasa selektuje elemente odredjenog tipa u roditeljskom elementu “gledano od nazad”!
Pseudo klase – opšte
:empty
Ova pseudo klasa selektuje elemenat koji nema dece.
Primer
1 |
:empty |
Ovaj selektor bi odabrao sledeći element:
1 |
<p></p> |
:not
ova pseudo klasa se ponaša kao negacija:
Primer
1 |
button:not([DISABLED]) |
Pseudo klasa iz prethodnog primera selektuje sve dugmiće koji nisu disabled.
NAPOMENA o razmacima!
Pseudo-klasa se dodaje na selektor bez razmaka. Ukoliko postoji razmak, kreira se kompleksan selektor.
Pseudo elementi
Pseudo elementi “liče” na HTML elemenat ali to nisu standardni HTML elementi.
::before
Ovaj selektor omogućava postavljanje stila na deo koji još nije definisan u dokumentu a pre je drugog elementa .
::after
Ovaj selektor omogućava postavljanje stila na deo koji još nije definisan u dokumentu a doći će posle drugog elementa.
See the Pen Pseudo elementi ::before i ::after by ProSystem Studio (@chos) on CodePen.
::first-letter
Ovaj selektor targetuje pseudo elemenat “prvo slovo”.
See the Pen Pseudo element ::first-letter by ProSystem Studio (@chos) on CodePen.
::first-line
Ovaj selektor targetuje pseudo elemenat “prva linija”.
NAPOMENA:
Pseudo elementi se ne mogu primeniti na inline stilove i moraju biti poslednji definisani u lancu selektora. Ako se koriste, treba ih postaviti nakon klase ili ID-a selektora i moguće je definisati jedan pseudo-element po selektoru.
Selektori elemenata u specifičnim odnosima
Elementi iz iste loze
Ukoliko želimo da selektujemo potomka nekog selektora i time povećamo specifičnost dovoljno je da dodamo još jedan selektor i stavimo razmak izmedju njih.
See the Pen Potomci jedne porodične loze by ProSystem Studio (@chos) on CodePen.
Element sa dva argumenta
Ukoliko u selektor stavimo dva HTML elementa jedan pored drugog bez razmaka nećemo dobiti isti efekat kao kada postoji razmak. Pogledajte razliku na sledećem primeru.
See the Pen Selektor braće by ProSystem Studio (@chos) on CodePen.
Element direktni potomak “el1>el2”
Odnosi se na sve elemente koji su direktni potomci svog roditelja (ne odnosi se na “unučiće” )
See the Pen Selektor elementa kome je roditelj … by ProSystem Studio (@chos) on CodePen.
Element najbliži sledeći brat “el1+el2”
Funkcija ovog selektora je da izabere “brata” elementa tj. onog koji je odmah posle prvo izabranog tipa elementa.
See the Pen Prva braća by ProSystem Studio (@chos) on CodePen.
Element sa prethodnikom “el1~el2”
Odnosi se na svaki element kojem negde u kodu prethodi drugi element (ne mora da budu jedan za drugim)
See the Pen ExampleEdit by ProSystem Studio (@chos) on CodePen.
Zaključak
Izbor odgovarajućeg selektora može biti veoma zaguljeno ako se pridje problemu sa pogrešne strane. Ovo ću da objasnim na primeru glavnog menija kome želim da promenim boju pri hover-u. Ukoliko izaberem selektore kao na prvom primeru, promeniću boju samo jednom elementu, dok u drugom primeru utičem na celu granu menija.
See the Pen Raspored elemenata by ProSystem Studio (@chos) on CodePen.
Objašnjenje:
U prethodnom primeru razlika je drastična zbog redosleda elemenata unutar selektora. U prvom slučaju na hover reaguje “a” tag u okviru “li” taga, dok u drugom na hover reaguje “li” tag (“li” tag je cela grana – pogledaj kod ispod) i svi “a” tagovi unutar njega.
1 2 3 4 5 6 7 |
<li> <a href="#">22</a <ul> <li><a href="#">221</a></li> <li><a href="#">222</a></li> </ul> </li> |
Faktori koji utiču na važnost selektora
a) Pozicija gde je definisan stil
U zavisnosti od lokacije gde je definisan stil zavisi njegova “važnost”. Sledeća lista je sortirana prema važnosti lokacije stila od najačeg ka slabijem:
- Stilovi definisani sa browser-om primenjuje podrazumevane stilove na definisane tagove
- Korisnički definisani stilovi u browser-u su stilovi browser-a koje dodatno definiše korisnik
- Autorski stilovi koje pišete vi kao autor:
- 3.1 Inline stilovi ubačeni u neki tag važe samo u okviru tog tag-a
- 3.2 Stilovi upisani u html su stilovi koji su ubačeni izmedju tagova <style></style> i važe za celu stranicu
- 3.3 Externi stilovi definisani u posebnim css fajlovima i linkovani u html dokumentu,
b) Pozicija selektora unutar CSS koda
Ukoliko se desi da dve deklaracije imaju istu poziciju gde su definisane i istu specifičnost, poslednje definisan stil će biti primenjen.
c) Nagomilavanje elemenata
Nagomilavanjem više elemenata se sužava izbor a samim tim povećava ukupna specifičnost selektora. Jačina selektora se dobija sabiranjem svih težina pojedinačnih selektora. Stoga izborom više težih elemenata se povećava ukupna specifičnost selektora.
d) “Težina” elemenata
Svaki tip elementa ima svoju “težinu”, elemenat je teži što ima veću specifičnost.
- selektor HTML tag-a (1 poen)
- selektori klase, atributa i pseudo selektori (10 poena )
- Selektor ID (100 poena)
NAPOMENA:
Univerzalni selektor i child selector, nemaju vrednost u proračunu specifičnosti.
Primer:
- p
ima specifičnost of 0,0,0,1 (1 HTML selector = 1) - div p
ima specifičnost of 0,0,0,2 (2 HTML selectors=1+1=2) - .tree
ima specifičnost of 0,0,1,0 (1 class selector=10) - p:first-child
ima specifičnost of 0,1,1, (1 pseudo selector + 1 HTML selector=10+1=11) - div p.tree
ima specifičnost of 0,0,1,2 (2 HTML selectors + 1 class selector=1+1+10=12) - #baobab
ima specifičnost of 0,1,0,0 (1 id selector = 100) - body #content .alternative p
ima specifičnost of 0,1,1,2
(HTML selector + id selector + class selector + HTML selector=1+100+10+1=112) - Inline CSS element ubacen u HTML
ima specifičnost of 1,0,0,0 (1 INLINE selector=1000)
Sajt za računanje specifičnosti ovde
Enabled i disabled, potkrala vam se greska 😉 Sve najbolje u daljem radu, puno pomazete ljudima koji tek ulaze u ove vode!
Thx, ispravio sam typo!