Elementi CSS-a

Kaskade

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:

  1. stilovi pridijeljeni atributom style
  2. id selektori
  3. klasni selektori i pseudoklase
  4. 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.
   
CARNet