Težina selektora

Specificiranost selektora

Nabrajajući sve ove selektore, njihove kombinacije kao i pseudo selektore, a znajući da se CSS može pisati na tri različite lokacije (eksterno, interno i inline) postavlja se pitanje koje pravilo će biti primenjeno u slučaju da se na više načina i na više lokacija pojavi opis jednog atributa sa različitim vrednostima?

Uzećemo jednostavan primer kako bi prikazali ovaj scenario.

Primer 1 – color atribut definisan na više mesta

Ako zamislimo situaciju u kojoj je color pravilo za body tag definisano kao red u eksternom, green u internom i blue u inline CSS kodu, šta mislite koje pravilo će biti primenjeno?

U ovom scenariju, odgovor je – poslednje uneto. Prvo pravilo definisano u eksternom dokumentu biće prvo koje pretraživač gleda i memoriše. Njime će vrednost za boju taga, tj. teksta unutar njega biti podešena na crvenu.

Zatim pretraživač nailazi na interni css u okviru koga je definisana zelena boja za body tag. Ta vrednost prepisuje prethodno definisanu crvenu. Na kraju, tokom čitanja html body taga, pretraživac uočava da je inline metodom (style=”color:blue;”) u okviru samog body taga definisana plava boja. Plava boja prepisuje vrednost zelene u plavu i konačno sve unutar body taga postaje obojeno u plavu.

Ovaj slučaj je najjednostavniji jer ne uključuje klase, id-jeve, detaljnost selektora i službenu deklaraciju !important, itd.

Ukoliko bi se interni stil nalazio nalazio pre link aka eksternom css fajlu, a za slučaj da ne postoji definisan inline stil, bilo bi primenjeno pravilo iz eksternog fajla, jer je ono poslednje učitano.

Pored ovoga postoji i druga metoda odlučivanja koja objašnjava koje pravilo ima prvenstvo. Taj metod sastoji se u sabiranju težina koje sačinjavaju neki složeni selektor. To pravilo kaže da počnete od nule i sabirate na sledeći način:

Dodavanje deklaracije !important ima težinu 10000 gde god da se nalazi

Svaki inline stil ima težinu od 1000

Svaki ID ima težinu 100

Svaka klasa, atribut* ili pseudo-klasa** ima težinu 10

Svaki html element (tag) ili pseudo-element*** ima težinu 1

*Atribut može biti [title],[title=”Naslov”], [src],[href]

**Pseudo-klase su hover, active, visited, link.

***Pseudo-elementi su: first-child, nth-child(n), itd

Pogledajmo primer.

body #content .data img:hover

body ima težinu 1

#content ima težinu 100

.data ima težinu 10

img ima težinu 1

:hover ima težinu 10

Ukupno, selektor ima težinu od 122.

Zašto bi računali težinu selektora? Pa uglavnom i nećete. Ono zbog čega je ovo bitno je da u složenim HTML dokumentima nadjete najkraći način da selektujete neki element jer poznajete odnos težina i drugo, jer će biti situacija kada iako ste pokušali da promenite CSS svojstva nekog elementa, ona se uporno ne menjaju!

U cilju lakšeg snalaženja, pokušajte da pronadjete neki id kojim bi selektovali element. On ubedljivo ima najveću težinu.

Zašto jednostavno ne bi ušli u postojeći css i izmenili pravilo? Zato što, ako radite na tudjem kodu, ne znate na šta sve taj selektor ima uticaj (i na kojim web stranama sajta) pa možda rešavanjem jednog napravite drugi problem.

Postoji jos jedan način da totalno zaobidjete ovu hijerarhiju koji smo pomenuli ali se ne preporučuje, sem u ekstremnim slučajevima. Njegova primena znači da niste posao uradili do kraja i predstavlja prečicu koja, ako se ne koristi oprezno, može da napravi problem na drugom mestu.

Taj način sastoji se u dodavanju službene reči !important na kraj CSS pravila, na primer:

body {color:grey!important;}

Oficijelno, potrebna je praznina izmedju završetka pravila i znaka ! ali većina pretraživača to ne uzima u obzir.

Na kraju, ima još jedan specijalan slučaj. To je slučaj kada je element stilizovan CSS-om iste težine na dva mesta. U tom slučaju, pobedjuje pravilo koje je kasnije napisano.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn