|
Vidjeli smo kako CSS možemo na različite načine povezati s dokumentom. U određenim
uvjetima može se dogoditi da više selektora s istim atributima, ali različitim svojstvima,
identificiraju isti element na stranici. Koje od pravila će se tada primjenjivati
definirano je kaskadnim svojstvima CSS-a.
Iako postoji egzaktan način izračuna koji selektor u kojoj situaciji prevladava,
njegova složenost izlazi iz okvira ovog tečaja. Međutim, možemo postaviti prioritetni
redni popis, koji u većini slučajeva daje željen rezultat. Na prvom mjestu su selektori
s najvećim prioritetom:
- stilovi pridijeljeni atributom style
- id selektori
- klasni selektori i pseudoklase
- kontekstni, pa jednostavni selektori.
Na sljedećem primjeru prikazan je prioritet selektora:
h1 {
color: red;
}
#naslov {
color: darkblue;
}
.plavo {
color: blue;
}
<h1 id=" naslov"> Lorem
ipsum</h1>
<p class=" plavo"
style=" color:purple;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Naslov je plav jer je id selektor
#naslov većeg prioriteta od jednostavnog selektora
h1. Budući da je u paragrafu tekst definiran atributom
style, koji je većeg prioriteta od klasnog selektora
.plavo, tekst je ljubičaste boje.
-
 Ukoliko
dva selektora imaju potpuno isti prioritet, vrijedit će onaj koji je u stilu
posljednji naveden.
|
