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;}