CSS Podcast - 003: Belirginlik
Aşağıdaki HTML ve CSS ile çalıştığınızı varsayalım:
<button class="branding">Hello, Specificity!</button>
button {
color: red;
}
.branding {
color: blue;
}
Burada iki kural var. Biri düğme kırmızı, diğeri ise mavi renklendirilir. Öğeye hangi kural uygulanır? CSS spesifikasyonunun algoritmasını spesifiklikle ilgili olarak anlamak, CSS'nin rekabet eden kurallar arasında nasıl karar verdiğini anlamanın anahtarıdır.
Belirginlik, son modülde döngüde ele alınmış olan, şelalenin dört farklı aşamasından biridir.
Özgüllük puanı
Her seçici kuralı bir puan alır. Belirginliği toplam bir puan olarak düşünebilirsiniz. Her seçici türü bu puana puan verir. En yüksek puana sahip seçici kazanır.
Gerçek bir projenin belirli olması durumunda dengeleme eylemi, karmaşıklığı önlemek için genellikle puanları düşük tutarken, uygulanmasını beklediğiniz CSS kurallarının gerçekten uygulanmasını sağlamaktır. Puan, mümkün olan en yüksek puanı hedeflemek yerine yalnızca gerektiği kadar yüksek olmalıdır. Gelecekte, gerçekten daha önemli bazı CSS'lerin uygulanması gerekebilir. En yüksek puanı kazanırsanız işiniz zorlaşır.
Her seçici türünü puanlama
Her seçici türü puan kazandırır. Bir seçicinin genel belirginliğini hesaplamak için tüm bu noktaları toplarsınız.
Evrensel seçici
Evrensel seçici (*
) spesifikliği yoktur ve 0 puan alır.
Bu durumda, 1 veya daha fazla puana sahip tüm kurallar değeri geçersiz kılar
* {
color: red;
}
Öğe veya sözde öğe seçici
Bir öğe (tür) veya sözde öğe seçicisi, 1 belirginlik noktası alır .
Tür seçici
div {
color: red;
}
Sözde öğe seçici
::selection {
color: red;
}
Sınıf, sözde sınıf veya özellik seçici
Bir sınıf, sözde sınıf veya özellik seçicisi, 10 kesinlik puanı alır.
Sınıf seçici
.my-class {
color: red;
}
Sözde sınıf seçici
:hover {
color: red;
}
Özellik seçici
[href='#'] {
color: red;
}
:not()
sözde sınıfının kendisi, spesifiklik hesaplamasına hiçbir şey eklemez.
Bununla birlikte, bağımsız değişken olarak iletilen seçiciler, spesifiklik hesaplamasına eklenir.
div:not(.my-class) {
color: red;
}
Bu örnek, :not()
içinde bir tür seçici (div
) ve bir sınıf içinde olduğundan 11 puana sahip olur.
Kimlik seçici
Kimlik seçici, özellik seçici ([id="myID"]
) yerine bir kimlik seçici (#myID
) kullandığınız sürece 100 spesifiklik puanı alır.
#myID {
color: red;
}
Satır içi stil özelliği
CSS, doğrudan HTML öğesinin style
özelliğine uygulandığında 1.000 puanlık bir spesifiklik puanı alır.
Yani CSS'de bunu geçersiz kılmak için son derece spesifik bir seçici yazmanız gerekir.
<div style="color: red"></div>
!important
kural
Son olarak, bir CSS değerinin sonundaki !important
,10.000 puan belirlilik puanı alır.
Bu, tek bir öğenin alabileceği en yüksek belirginliktir.
!important
kuralı bir CSS mülküne uygulandığından genel kuraldaki her şey (seçici ve özellikler) aynı belirlilik puanını almaz.
.my-class {
color: red !important; /* 10,000 points */
background: white; /* 10 points */
}
Öğrendiklerinizi sınayın
Özgünlük puanıyla ilgili bilginizi test edin
a[href="#"]
için spesifiklik puanı nedir?
a
1 puan, [href="#"]
ise 10 puan değerindedir.a
1 puan, [href="#"]
10 puan değerindedir ve toplam 11 puan almıştır.Bağlam içindeki belirginlik
Bir öğeyle eşleşen her bir seçicinin ayrıntı düzeyi toplanır. Şu örnek HTML'yi inceleyin:
<a class="my-class another-class" href="#">A link</a>
Bu bağlantıda iki sınıf var. Aşağıdaki CSS'yi eklediğinizde 1 belirginlik noktası alır:
a {
color: red;
}
Bu kuraldaki sınıflardan birine referans verin. Artık 11 kesinlik noktasına sahiptir:
a.my-class {
color: green;
}
Diğer sınıfı seçiciye ekleyin. Seçiciye artık 21 belirginlik noktası sunulmaktadır:
a.my-class.another-class {
color: rebeccapurple;
}
Seçiciye href
özelliğini ekleyin. Seçiciye artık 31 belirginlik noktası sunulmaktadır:
a.my-class.another-class[href] {
color: goldenrod;
}
Son olarak,bunların tümüne bir :hover
sözde sınıf ekleyin. Seçici, 41 spesifikliğe sahip olacaktır:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Öğrendiklerinizi sınayın
Özgünlük puanıyla ilgili bilginizi test edin
Aşağıdaki seçicilerden hangisinin değeri 21 puandır?
article > section
article.card.dark
article:hover a[href]
Belirliliği görselleştirme
Diyagramlarda ve özgüllük hesaplayıcılarda, kesinlik genellikle şu şekilde görselleştirilir:
Soldaki grup, id
seçicidir.
İkinci grup; sınıf, özellik ve sözde sınıf seçicilerdir.
Son grup, öğe ve sözde öğe seçicilerdir.
Referans olarak, aşağıdaki seçici 0-4-1
kullanılmıştır:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Öğrendiklerinizi sınayın
Belirginlik görselleştirme konusundaki bilginizi test edin
Aşağıdaki seçicilerden hangisi 1-2-1
şeklindedir?
section#specialty.dark
1-1-1
olarak görselleştirilir.#specialty:hover li.dark
[data-state-rad].dark#specialty:hover
1-3-0
olarak görselleştirilir.li#specialty section.dark
1-1-2
olarak görselleştirilir.Pragmatik olarak belirginliği artırma
Aşağıdaki gibi görünen bazı CSS'lerimiz olduğunu varsayalım:
.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Şunun gibi görünen HTML ile:
<button class="my-button" onclick="alert('hello')">Click me</button>
İkinci seçici 11 puan kazandığı için düğmenin arka planı gri olur (0-1-1
). Bunun nedeni, 1 puan olan bir tür seçiciye (button
) ve 10 puan olan bir özellik seçiciye ([onclick]
) sahip olmasıdır.
Önceki kural (.my-button
), bir sınıf seçiciye sahip olduğu için 10 puan (0-1-0
) alıyor.
Bu kuralı güçlendirmek istiyorsanız sınıf seçiciyi şu şekilde tekrarlayın:
.my-button.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Şimdi yeni seçici 20 puan (0-2-0
) belirli bir doğruluk puanı aldığından, düğmenin arka planı mavi olur.
Eşleşen bir belirlilik puanı, en yeni örneği kazanır
Şimdilik düğme örneği üzerinden kalalım ve CSS'yi şu şekilde değiştirelim:
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
Her iki seçicinin de belirginlik puanı aynı olduğundan (0-1-0
) düğmenin arka planı gri olur.
Kuralları kaynak sırasında değiştirirseniz düğme mavi olur.
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
Yeni CSS'nin kazandığı tek örnek budur. Bunu yapmak için, aynı öğeyi hedefleyen başka bir seçicinin belirginliğiyle eşleşmesi gerekir.