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

Definisani sa tipom HTML elementa

Ovo su najjednostavniji selektori i definišu se nazivom HTML elementa koji targetiraju.

Primer

ili

Definisani sa klasom elementa

Ovi selektori “gadjaju” HTML elemente koji sadrže odredjenu klasu.

Primer

Selektor koji targetira klasu se obeležava sa . (tačkom) ispred imena klase.

Definisani sa ID-om elementa

Ovi selektori “gadjaju” HTML elemente koji sadrže odredjeni ID. Obeležavaju se # znakom ispred naziva ID.

Primer

Selektor koji targetira element sa odredjenim ID-om se obeležava sa znakom # ispred ID-a.

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.

[attribute]

Selektor u sledećem primeru se odnosi se na sve HTML elemente koji sadrže atribut “href”.

Primer

[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

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:

[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

Ovaj selektor bi izabrao sledeći element:

[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

Prethodni selektor bi izabrao sledeći element:

[attribute^=value]

Ovaj selektor odabira element čiji atribut počinje sa odredjenim znakovnim nizom.

Primer

Pa prethodni selektor bi mogao da izabere sledeći element čiji atribut href počinje sa http://:

[attribute$=value]

Ovaj selektor odabira element čiji atribut se završava sa odredjenim znakovnim nizom.

Prethodni selektor bi izabrao sledeći element:

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

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

:link

Ova pseudo klasa selektuje linkove nisu posećeni.

Primer

:hover

Ova pseudo klasa selektuje bilo koji elemenat (ne samo link!) iznad koga se nalazi pokazivač.

Primer

: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

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

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

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:

Primer

Na sledećem primeru selektujemo svaki paran element ali startujući “od kraja ka napred”

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

Ukoliko želimo da selektujemo prvi paragraf onda koristimo:

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

Ovaj selektor bi odabrao sledeći element:

:not

ova pseudo klasa se ponaša kao negacija:

Primer

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.

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:

  1. Stilovi definisani sa browser-om primenjuje podrazumevane stilove na definisane tagove
  2. Korisnički definisani stilovi u browser-u su stilovi browser-a koje dodatno definiše korisnik
  3. 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

Podelite:

2 Responses to “CSS selektori”

  1. Aleksandar

    Enabled i disabled, potkrala vam se greska 😉 Sve najbolje u daljem radu, puno pomazete ljudima koji tek ulaze u ove vode!

Ostavite komentar