CSS !important nedir? Nasıl kullanılır ?

CSS Important tanımı nedir?

CSS Important tanımı, bir CSS özelliğinin(property) önceliğini(priority) yükselten bir özelliktir. Bir başka değişle inheritance yani miras alma yoluyla CSS’e gelen özellikleri devre dışı bırakarak important kullandığınız satırdaki özelliği uygulayacağımız anlamına gelmektedir.

CSS Important kullanımı?

p {
   color:#ff0000;
}

p {
   color:#0000ff !important;
}

Buradaki örnek kullanımında ilk tanımlamada tüm p etiketleri için yazı rengini kırmızı rengi yaptık alttaki CSS !important tanımını kullandığımız örnekte ise tüm yazı rengini mavi yaptık ve artık !important tanımlı yaptığımız tanım kullanılacak tüm p etiketlerinin yazı rengi mavi olucaktır.

CSS'de Important’a Neden İhtiyaç Duyuyoruz?

Örneğin bir menünüz olduğunu ve alt menüleri olduğunu düşünelim. Menü ve alt menülerimizi farklı renklerle göstermek isteyelim bu durumda iki duruma göre farklı özellik vermemiz gerekecektir.

<ul class="menu">
    <li>Menü 1</li>
    <li>Menü 2</li>
    <li>Menü 3
        <ul>
          <li class="altmenu">Alt Menü</li>
        </ul>
    </li>
    <li>Menü 4</li>
</ul>

CSS kodumuz ise;

ul.menu li{
    background-color:#00f;
}

li.altmenu{
    background-color:#f00;
}

şeklinde olduğunda görüceksiniz ki tüm menüler aynı renkte olucaktır.

Bu durumlarda important özelliği devreye girerek sorunumuzu çözmemize yardımcı olucaktır.

li.altmenu{
    background-color:#f00 !important;
}

Öncelikli olarak yapmak stilimize yukarıdaki gibi CSS !important tanımını yaptığımızda sorunun çözüldüğünü görüceksiniz.