CSS Özgüllüğü
Özgüllük nedir?
Aynı öğeye işaret eden iki veya daha fazla CSS kuralı varsa, en yüksek özgüllük değerine sahip seçici "kazanır" ve stil bildirimi bu HTML öğesine uygulanır.
Spesifikliği, bir öğeye nihai olarak hangi stil bildiriminin uygulanacağını belirleyen bir puan/sıra olarak düşünün.
Aşağıdaki örneklere bakın:
örnek 1
Bu örnekte seçici olarak "p" elemanını kullandık ve bu eleman için kırmızı bir renk belirledik. Metin kırmızı olacaktır:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Şimdi örnek 2'ye bakın:
Örnek 2
Bu örnekte, bir sınıf seçici ("test" adında) ekledik ve bu sınıf için yeşil bir renk belirledik. Metin şimdi yeşil olacaktır ("p" eleman seçicisi için kırmızı bir renk belirtmiş olmamıza rağmen. Bunun nedeni, sınıf seçiciye daha yüksek öncelik verilmesidir:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Şimdi, örnek 3'e bakın:
Örnek 3
Bu örnekte, kimlik seçiciyi ("demo" olarak adlandırılır) ekledik. Kimlik seçiciye daha yüksek öncelik verildiği için metin artık mavi olacaktır:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
Şimdi örnek 4'e bakın:
Örnek 4
Bu örnekte, "p" öğesi için bir satır içi stil ekledik. Satır içi stile en yüksek öncelik verildiğinden metin şimdi pembe olacaktır:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
Özgüllük Hiyerarşisi
Her CSS seçicisinin özgüllük hiyerarşisinde yeri vardır.
Bir seçicinin özgüllük düzeyini tanımlayan dört kategori vardır:
- Satır içi stiller - Örnek: <h1 style="color: pink;">
- Kimlikler - Örnek: #navbar
- Sınıflar, sözde sınıflar, nitelik seçiciler - Örnek: .test, :hover, [href]
- Öğeler ve sözde öğeler - Örnek: h1, :before
Özgüllük Nasıl Hesaplanır?
Spesifikliği nasıl hesaplayacağınızı ezberleyin!
0'dan başlayın, her kimlik değeri için 100 ekleyin, her sınıf değeri (veya sözde sınıf veya nitelik seçici) için 10 ekleyin, her öğe seçici veya sözde öğe için 1 ekleyin.
Not: Satır içi stil, 1000 özgüllük değeri alır ve her zaman en yüksek öncelik verilir!
Not 2: Bu kuralın bir istisnası vardır: kuralı kullanırsanız, !important
satır içi stilleri bile geçersiz kılar!
Aşağıdaki tablo, özgüllük değerlerinin nasıl hesaplanacağına ilişkin bazı örnekleri göstermektedir:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
En yüksek özgüllük değerine sahip seçici kazanacak ve yürürlüğe girecek!
Bu üç kod parçasını göz önünde bulundurun:
Örnek
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
A'nın özgüllüğü 1'dir (tek öğe seçici)
B'nin özgüllüğü 101'dir (bir kimlik referansı + bir öğe seçici)
C'nin özgüllüğü 1000'dir (satır içi stil)
Üçüncü kural (C), en yüksek özgüllük değerine (1000) sahip olduğundan, bu stil bildirimi uygulanacaktır.
Daha Fazla Özgüllük Kuralı Örneği
Eşit özgüllük: en son kural kazanır - Aynı kural harici stil sayfasına iki kez yazılırsa, en son kural kazanır:
Örnek
h1 {background-color: yellow;}
h1 {background-color: red;}
Kimlik seçiciler, öznitelik seçicilerden daha yüksek bir özgüllüğe sahiptir - Aşağıdaki üç kod satırına bakın:
Örnek
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
ilk kural diğer ikisinden daha spesifiktir ve bu nedenle uygulanacaktır.
Bağlamsal seçiciler, tek bir öğe seçiciden daha belirgindir - Gömülü stil sayfası, stil verilecek öğeye daha yakındır. Yani aşağıdaki durumda
Örnek
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
son kural uygulanacaktır.
Bir sınıf seçici, herhangi bir sayıda öğe seçiciyi yener - .intro gibi bir sınıf seçici, h1, p, div vb.'yi yener:
Örnek
.intro {background-color: yellow;}
h1 {background-color:
red;}
Evrensel seçici (*) ve devralınan değerlerin özgüllüğü 0'dır - Evrensel seçici (*) ve devralınan değerler yok sayılır!