Pravilo !important

Pravilo !important uporabimo, kadar želimo določeni deklaraciji povečati pomembnost v kaskadi. To ne pomeni, da bo taka deklaracija vedno obveljala v vseh okoliščinah, pomeni pa, da bo znotraj istega izvora in iste kaskadne plasti imela prednost pred navadnimi deklaracijami.

Osnovna pravila

Pravilo !important zapišemo na koncu deklaracije, tik pred podpičjem:

p {
   color: silver !important;
}

Če za isto lastnost na istem elementu velja več pravil, imajo pomembne deklaracije prednost pred navadnimi deklaracijami iz istega izvora in iste plasti. Če pa je več deklaracij označenih z !important, potem rezultat ni naključen, ampak še vedno odločajo izvor pravila, kaskadne plasti, specifičnost in vrstni red zapisa.

1. izvor pravila,
2. kaskadne plasti,
3. specifičnost,
4. vrstni red zapisa.

Primerjave

Navadno pravilo in pomembno pravilo

<p class="oranzna">V tem stavku je uporabljeno pravilo <span style="color: red;">!important</span>.</p>

p { 
   color: silver !important;
}

.oranzna { 
   color: orange;
}

Pojasnilo:
Odstavek bo srebrne barve, ker ima pravilo p { color: silver !important; } večjo pomembnost kot navadno pravilo za razred .oranzna. Besedilo v elementu span pa bo rdeče, ker ima ta element svojo neposredno nastavljeno vrednost.

Če je več pravil označenih z !important

Kadar sta dve pravili za isto lastnost obe označeni z !important, odloča specifičnost. Če je tudi specifičnost enaka, velja zadnje zapisano pravilo.

p {
   color: blue !important;
}

.opozorilo {
   color: orange !important;
}

Če ima odstavek razred opozorilo, bo besedilo oranžno, ker je selektor z razredom bolj specifičen od selektorja po elementu.

Inline slog in !important

Inline slog z atributom style ima med navadnimi avtorskimi slogi zelo visoko prednost. Če pa ima drugo pravilo oznako !important, lahko navadni inline slog izgubi. Inline slog z !important pa ima prednost pred drugimi avtorskimi pomembnimi slogi.

<p style="color: green;">Besedilo</p>

p {
   color: blue !important;
}

V tem primeru bo besedilo modro, ker pomembna deklaracija preglasi navadni inline slog.

Kaskadne plasti

Pravilo !important je povezano tudi s kaskadnimi plastmi @layer. Pri navadnih deklaracijah imajo nelastne plasti in pozneje zapisane plasti prednost pred prej zapisanimi plastmi. Pri pomembnih deklaracijah pa se ta vrstni red obrne: pomembne deklaracije iz prej ustvarjenih plasti imajo prednost pred pomembnimi deklaracijami iz poznejših plasti.

@layer osnova, prilagoditve;

@layer osnova {
   p {
      color: blue !important;
   }
}

@layer prilagoditve {
   p {
      color: orange !important;
   }
}

V takem primeru bo pri pomembnih deklaracijah prednost imela plast osnova, ker je bila določena prej. To je posebnost, ki jo je pri uporabi !important dobro poznati.

Priporočila

• Najprej preveri, ali lahko težavo rešiš z boljšim selektorjem ali preglednejšim vrstnim redom pravil.
• !important uporabljaj le tam, kjer je to res potrebno.
• Pri večjih slogovnih datotekah razmisli o uporabi kaskadnih plasti @layer.
• Posebej previden bodi pri pravilih za komponente, ki jih boš kasneje še večkrat spreminjal.

Pogoste napake

• Prepričanje, da !important vedno premaga popolnoma vse druge deklaracije.
• Pretirana uporaba !important v skoraj vsakem pravilu.
• Pozabljanje, da pri več pomembnih deklaracijah še vedno odločata specifičnost in vrstni red zapisa.
• Neupoštevanje vpliva kaskadnih plasti na pomembne deklaracije.