CSS: Sitil Önceliği-1

Hüseyin Akdogan tarafından yazıldı.   

PDF olarak oku

Bazen, bir sayfa elemanı için birden fazla seçici kullanılabilir. Yani aynı sayfa elemanı için birden fazla stil tanımı yapmış olabiliriz. Bu durumda da bu stil tanımlarının önceliği konusu gündeme gelir. Web tarayıcılarının stil önceliğini tespit etmek için kullandıkları bir yöntem vardır.

Eğer bir sayfa elemanını hedef alan birden fazla seçici, stil tanımı söz konusuysa tarayıcılar, her bir stil için 4 basamaklı bir değer oluştururlar ve stil önceliğini, bu değerler içerisinde en büyük değere sahip olan stil tanımına verirler.

Bu 4 basamaklı değer şöyle tespit edilir:

• 1. basamağın değeri, stil satır içi tanımlanmış ise 1, aksi durumda 0 olur
• 2. basamağın değeri, seçici içinde kullanılan id seçici sayısının toplamıdır
• 3. basamağın değeri, seçici içinde kullanılan nitelik, sınıf ve sözde sınıf sayısının toplamıdır
• 4. basamağın değeri, seçici içinde kullanılan eleman sayısının toplamıdır

Bu video dersinde, stil önceliği konusunda tarayıcı davranışını belirleyen kuralları anlatmaya çalıştım. Derste yer alan stil tanımlamaları aşağıdaki gibidir:

p {
    color: gray;
    font-size: 14px;
    font-weight: bold;
    padding: 0px 0px 0px 15px;
    text-decoration: underline;
}

/*
Stil satır içi tanımlanmadığından, 1. basamak değeri 0 olur
Seçici içinde id seçici kullanılmadığından, 2. basamak değeri 0 olur
Seçici içinde nitelik, sınıf veya sözde sınıf yer almadığından, 3. basamak değeri 0 olur
Seçici içinde kullanılan eleman sayısı 1 olduğundan, 4. basamak değeri 1 olur

Seçici değeri: 0001
*/

p[title="merhaba"]{
    text-decoration: none;
    color: red;
}

/*
Stil satır içi tanımlanmadığından, 1. basamak değeri 0 olur
Seçici içinde id seçici kullanılmadığından, 2. basamak değeri 0 olur
Seçici içinde title niteliği yer aldığından, 3. basamak değeri 1 olur
Seçici içinde kullanılan eleman sayısı 1 olduğundan, 4. basamak değeri 1 olur

Seçici değeri: 0011
*/