Css !important

Merhaba, bu makalemizde Css yazarken sıkça kullandığım !important kodunun ne işe yaradığından bahsedeceğim.  Gerçekten bazı zamanlar saçınızı başınızı yolmanızı engeller.

Her makalemde olduğu gibi direkt olarak örnekle başlamayacağım çünkü mantığınıda anlamanızı istiyorum. Hadi başlayalım!

Bildiğiniz gibi kullanıcı tarayıcı ile bir siteye girdiği zaman tarayıcılar yukarıdan aşağıya doğru DOM‘u okurlar. Böyle olduğu için bizde sayfamızı yukardan aşağıya doğru kodlamaya başlarız. Aynı kural CSS’de mevcuttur. CSS’de belli bir hiyerarşi vardır.

Yani alt tarafda yazdığınız kural her zaman üst tarafda bulunan kodunuzu geçersiz kılar!

Bu kurala INLINE dediğimiz kodlar hariçtir (ÖR: <div style=”CSS kodlarınız”>). Tarayıcı Inline kodlara her zaman öncelik tanır!

Örnek vermek gerekirse şöyle bir sayfamız olsun;

Burda gördüğünüz gibi h1 tagına 2 adet renk kodu verdik. Birisi mavi (<style></style> içinde) diğeride kırmızı (inline)

Peki sizce şuan bu h1 tagı hangi renkte görünüyor? Tabiki Kırmızı görünüyor çünkü inline yazdığımız kodların her zaman önceliği vardır!

Peki ya <style></style> içindeki kodumuza !important eklersek ?

Sayfamızı tekrar düzenleyim ve şu hale getirelim

Eğer denediyseniz şuan h1 tagının mavi göründüğünü görebilirsiniz.

Birçoğunuz anlamıştır. !important css’de hiyerarşiyi tanımadan yanına !important yazdığınız koda öncelik verir. Css kodunun nerede yazıldığı önemli değildir.

Önemli: !important kullanırkende bir hiyerarşi vardır. Yukardaki örneğimizden devam edersek eğer inline kodumuza !important eklersek (<h1 style=”color: red !important;”>Cihan Aksoy</h1>) yazı tekrar kırmızı olur ve inline bir kod olduğu için hiyerarşide öncelik onundur.

Kodların tamamına şuradan ulaşabilirsiniz

Umarım doğru anlatabilmişimdir. Anlamadığınız yerler olursa lütfen yorum atın elimden geldiğince yardımcı olmaya çalışırım.

Bir sonraki makalede görüşmek üzere!

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir