CSS Podcast'i - 003: Belirlilik
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 birbiriyle rekabet eden iki kural var. Biri düğmeyi kırmızı, diğeri ise mavi renklendirir. Öğeye hangi kural uygulanır? CSS spesifikasyonunun belirginlikle ilgili algoritmasını anlama CSS'nin rakip kurallar arasında nasıl karar verdiğini anlamanın anahtarıdır.
Belirginlik, bu şelalenin dört farklı aşamasından biridir. Bu konu son modülde basamakla ele alınmıştı.
Özgüllük puanı
Her seçici kuralın bir puanlaması vardır. Kesinliği toplam bir puan olarak düşünebilirsiniz ve her seçici türü bu puana katkı sağlayacak bir puan kazandırır. En yüksek puanı alan seçici kazanır.
Gerçek bir projeyi somut ve belirli dengelemek, uygulamayı beklediğiniz CSS kurallarının, fiilen uygulanmasını, çoğu zaman karmaşıklığı önlemek için puanları düşük tutar. Skor, ihtiyacımız olan kadar yüksek olmalı. bir hedef belirleyebilirsiniz. Gelecekte gerçekten daha önemli bazı CSS'lerin uygulanması gerekebilir. En yüksek puanı almak için çalışırsanız işinizi zorlaştırırsınız.
Her seçici türünün puanlanması
Her seçici türü puan kazanır. Bir seçicinin genel spesifikliğini hesaplamak için bu noktaların tümünü eklersiniz.
Evrensel seçici
Evrensel seçici (*
)
spesifik olmayan ve 0 puan alıyor.
Bu durumda, 1 veya daha fazla puanı olan kurallar geçersiz kılınır
* {
color: red;
}
Öğe veya sözde öğe seçici
Öğe (tür) veya sözde öğe seçicinin 1 kesinlik noktası vardı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
Sınıf sahte-sınıf veya özellik seçicisi 10 spesifik nokta 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 kendisi, belirginlik hesaplamasına hiçbir şey eklemez.
Bununla birlikte, bağımsız değişken olarak iletilen seçiciler, belirlilik hesaplamasına eklenir.
div:not(.my-class) {
color: red;
}
Bu örnek 11 puan belirginliğine sahip olur
çünkü :not()
öğesinin içinde bir tür seçici (div
) ve bir sınıf vardır.
Kimlik seçici
Kimlik
seçici 100 nokta,
özellik seçici ([id="myID"]
) değil, kimlik seçici (#myID
) kullandığınız sürece.
#myID {
color: red;
}
Satır içi stil özelliği
CSS, doğrudan HTML öğesinin style
özelliğine uygulanır.
1.000 puan alır.
Bu, 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 olan bir spesifiklik puanı alır.
Bu, tek bir öğenin alabileceği en yüksek kesinlik düzeyidir.
!important
kuralı bir CSS mülküne uygulanır.
Bu nedenle, genel kuraldaki her şey (seçici ve özellikler) aynı kesinlik puanını almaz.
.my-class {
color: red !important; /* 10,000 points */
background: white; /* 10 points */
}
Öğrendiklerinizi sınayın
Belirlilik puanlamasıyla ilgili bilginizi test edin
a[href="#"]
özelliğinin kesinlik puanı nedir?
Bağlam içinde belirlilik
Bir öğeyle eşleşen her seçicinin kesinliği toplanır. Şu örnek HTML'yi ele alalım:
<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 spesifik noktası elde edilir:
a {
color: red;
}
Bu kuraldaki sınıflardan birine referansta bulunun, artık 11 belirli nokta var:
a.my-class {
color: green;
}
Diğer sınıfı seçiciye ekleyin, artık 21 belirli nokta var:
a.my-class.another-class {
color: rebeccapurple;
}
Seçiciye href
özelliğini ekleyin.
artık 31 belirli nokta var:
a.my-class.another-class[href] {
color: goldenrod;
}
Son olarak, tüm bunlara bir :hover
sözde sınıfı ekleyin.
seçicinin sonunda 41 kesinlik noktası vardır:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Öğrendiklerinizi sınayın
Belirlilik puanlamasıyla ilgili bilginizi test edin
Aşağıdaki seçicilerden hangisinin 21 puan değeri vardır?
article > section
article:hover a[href]
article.card.dark
Belirginliği görselleştirme
Diyagramlarda ve özgüllük hesaplayıcılarda, belirginlik genellikle şu şekilde görselleştirilir:
Soldaki grup id
seçicidir.
İkinci grup; sınıf, özellik ve sözde sınıf seçicileri içerir.
Son grup, öğe ve sözde öğe seçicilerdir.
Referans olması amacıyla şu seçici şu şekildedir: 0-4-1
:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Öğrendiklerinizi sınayın
Belirlilik görselleştirme hakkındaki bilginizi test edin
Aşağıdaki seçicilerden hangisi 1-2-1
öğesidir?
li#specialty section.dark
[data-state-rad].dark#specialty:hover
#specialty:hover li.dark
section#specialty.dark
Pragmatik olarak artan belirginlik
Aşağıdaki gibi görünen bazı CSS'lerimiz olduğunu varsayalım:
.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Aşağıdaki gibi görünen HTML ile:
<button class="my-button" onclick="alert('hello')">Click me</button>
Düğmenin arka planı gri renktedir.
ikinci seçici 11 kesinlik puanı (0-1-1
) kazandığı için.
Bunun nedeni, bir tür seçicinin (button
),
Bu, 1 puan ve bir özellik seçici ([onclick]
) yani 10 puan şeklindedir.
Önceki kural (.my-button
) 10 puan (0-1-0
),
çünkü bir sınıf seçici var.
Bu kuralı güçlendirmek isterseniz sınıf seçiciyi şu şekilde tekrarlayın:
.my-button.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Şimdi düğmenin arka planı mavi olur.
çünkü yeni seçicinin belirlilik puanı 20 puan (0-2-0
).
Eşleşen bir spesifiklik puanı en yeni örnek kazanmayı görür
Şimdilik düğme örneğiyle devam edelim ve CSS'yi şu şekilde değiştirelim:
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
Düğmenin arka planı gri renktedir.
çünkü her iki seçicinin de belirlilik puanı aynıdır (0-1-0
).
Kuralları kaynak sırayla değiştirirseniz düğme mavi renge döner.
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
Yeni CSS'nin kazandığı tek durum budur. Bunu yapmak için, aynı öğeyi hedefleyen başka bir seçicinin kesinliğiyle eşleşmesi gerekir.