• Tolga Kaprol
• Oct 13,2009
• In: Cascading Style Sheets (CSS)

Importance of !Important

CSS ile uğraşan güruhun ara sıra görüp de üstüne fikri olmadığı bir CSS özelliğinden bahsedelim: Important. Özellikle gelişmiş CSS çalışmaları ile uğraşıyorsanız mutlaka bilmeniz gerekenlerin arasındaki özelliklerden biridir.

Important Nedir?

Important, bir CSS özelliğinin(property) önceliğini(priority) yükselten bir özelliktir. Bir diğer değişle inheritance yani miras alma yoluyla CSS’e gelen özellikleri devre dışı bırakarak important kullandığınız satırdaki özelliği öncelikli olarak uygular.

Important’a Neden İhtiyaç Duyuyoruz?

Örneğin aynı HTML tagına iki duruma göre farklı özellik vermemiz gerektiğini düşünelim:

Buton isimli bir div’imiz olduğunu ve bununda varsayılan özelliğinin kapalı olduğunu vurgulayan gri bir fon resmi olsun:

<div class="buton"></div>

.buton {width:100px; height:20px; background: url('images/gray.png');}

Bu butonun fon resmini aşağıdaki gibi değiştirmeye çalıştığımızda istediğimiz sonucu alamayabiliriz:

<div class="buton acik"></div>

.acik {background: url('images/green.png');}

Bu durumlarda important özelliği devreye girmelidir. Öncelikli olan stilinize aşağıdaki gibi !important özelliğini eklediğinizde sorun çözülecektir.

.acik {background: url('images/green.png')!important;}