CSS İmportant Nedir?

!important Temel olarak, CSS değerine daha fazla ağırlık vermek için CSS özellik - değer çiftinin sonuna ekleyebileceğiniz bir anahtar kelimedir. Kullanılmasının nedeni, "sistemde" göründükleri yere göre değerlere ağırlık veren CSS'nin doğası gereğidir. Bu sırada, dört faktöre dayalı bir CSS stili uygulanacaktır:

CSS Specificity(özgüllük) nedir?

Aynı öğeye işaret eden iki veya daha fazla çakışan CSS kuralı varsa, tarayıcı hangisinin en belirgin ve dolayısıyla kazanacağını belirlemek için bazı kuralları izler.

Özgüllüğü, hangi stil bildirimlerinin nihayetinde bir elemana uygulanacağını belirleyen bir puan - derece olarak düşünün.

Evrensel seçici (*) düşük seçiciliğe sahipken, ID seçicileri oldukça spesifiktir!

Specificity (Özgüllük) Hiyerarşisi

Her seçicinin özgünlük hiyerarşisindeki yeri vardır. Seçicinin özgüllük seviyesini tanımlayan dört kategori vardır:

Satır içi stilleri - Satır içi stil, doğrudan stillendirilecek öğeye eklenir. Örnek:

 
<h1 style = "color: #ffffff;"> </p>

Kimlikler - Kimlik, #navbar gibi sayfa öğeleri için benzersiz bir tanımlayıcıdır.

Sınıflar, öznitelikler ve sözde sınıflar - Bu kategori .class, [öznitelikler] ve sözde sınıfları içerir: hover, focus vs.

Elementler ve sözde elemanlar - Bu kategori, h1, div : gibi ve öncesi ve sonrası eleman adlarını ve sözde elemanları içerir.

Spesifiklik(özgüllük) Nasıl Hesaplanır?

Özgüllüğü bulmak için nasıl hesaplanır.

stil niteliği için 1000 ekleyin, her kimlik için 100 ekleyin, her özellik için sınıf ekleyin, sınıf veya sözde sınıf, her öğe adı veya sözde öğe için 1 ekleyin.

ÖRNEK:

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

A'nın özgüllüğü 1'dir (bir öğe)

B'nin özgüllüğü 101'dir (bir ID referansı ve bir öğe)

C'nin özgüllüğü 1000'dir (satır içi stil)

1 <101 <1000 olduğundan, üçüncü kural (C) daha yüksek bir özgüllük seviyesine sahiptir ve bu nedenle C'nin style özellikleri uygulanacaktır.

CSS'de aynı seviyede parağrafımıza renk verelim.

p{color:blue}

p{color:yellow}

Parağrafımız için iki renk tanımlamasında bulunduk. Tarayıcılar en son tanımlanan rengi(sarı) parağrafımıza uygulayacaktır. Peki ilk tanımlanan geçerli olmasını istiyorsak !important özelliği vermeliyiz.

p{color:blue !important}

p{color:yellow}	

Bu sefer parağraf rengimiz mavi rengini alacak.

Peki, biz sayısal değeri küçük olan tanımın etkin olmasını istersek ne yapabiliriz? Ö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="liste">Alt Menü</li>
        </ul>
    </li>
    <li>Menü 4</li>
</ul>	

CSS kodumuzda şöyle olsun.

ul.menu li{
	background-color:lightblue;
}

li.liste{
	background-color:grey;
}

Sonuca bakarsak menülerimizin tüm renk aynı renk olacaktır, istediğimiz sonucu alamadık bunun için !important özelliği kullanarak tarayacıya Bu özellik, önemli bunu uygula diyeceğiz.

li.liste{
	background-color:grey !important;
}	

Seçici adına üst eleman adlarını ekleyerek etkinliği arttırma

CSS kaskadını daha iyi kullanın Daha spesifik kurallar kullanın. Seçtiğiniz öğeden önce bir veya daha fazla öğe belirterek, kural daha belirgin hale gelir ve daha yüksek öncelik kazanır:

HTML:

<div id="test">
  <span>Text</span>
</div>

CSS:

div#test span { color: green; }

div span { color: blue; }

span { color: red; }

En belirgin olduğu için metin yeşil olacaktır. (Ayrıca mavi kural, kuralların sırasına bakılmaksızın kırmızı kuralını geçersiz kılar)

Belirteceğiniz üst seciçiler yoksa özgüllüğü artırmak için basit seçicileri yineleyin.

#myId#myId span { color: yellow; }

.myClass.myClass span { color: orange; }

Satıriçi kodları Ezmek için !4important kullanımı

Bazı durumlarda HTML'ye müdahele imakanımızın olmadığı durumlarda veya acil bir düzeltme gerektiğin genelde lazım oluyor !important tanımı. Eğer HTML içinden bir tanım yapıldı ise CSS ile yaptığımız hiç bir tanım satıriçi kodu ezemiyecektir. Tek çare !important tanımıdır.

HTML:

<p style="color:blue">CSS Font Dersi</p>	
	

CSS:

p{color:green !important}