CSS-də spesifiklik və selektorların çəki sistemi

Elvin Huseynov

Spesifiklik nədir?
Spesifiklik, brauzerin hansı CSS qaydalarının bir elementə tətbiq olunacağını müəyyənləşdirmək üçün istifadə etdiyi bir alqoritmdir. Əgər bir element bir neçə fərqli selektorla uyğun gəlirsə, brauzer daha yüksək spesifikliyə malik olan stil qaydasını tətbiq edir. Bu prinsip bəzən kaskad qaydasını poza bilər.

Selektorların Çəkisi

Brauzer CSS selektorlarının spesifikliyini aşağıdakı qaydada hesablayır:

ID selektorları → Ən yüksək çəkiyə malikdir.
Class, atribut və psevdoklass selektorları → Orta səviyyəli çəkiyə malikdir.
Tag və psevdoselektorlar → Ən aşağı çəkiyə malikdir.

Bəzi xüsusi selektorlar isə çəkiyə təsir etmir:

* (universal selektor)
Combinator-lar (+, >, ~)
:where() psevdoklassı

Psevdoklasslar :is(), :has() və :not() isə içindəki ən spesifik selektorun çəkisini qəbul edir.

Spesifiklik hesablama sistemi

Spesifikliyi hesablamaq üçün selektoru üç hissəyə ayıraq: ID, class/atribut, və tag selektorları. Bu hissələri 0.0.0 formatında göstərə bilərik.

ID selektorları → İlk rəqəmi artırır.
Class, atribut və psevdoklass selektorları → İkinci rəqəmi artırır.
Tag və psevdoselektorlar → Üçüncü rəqəmi artırır.

Məsələn:

Selektor	Spesifiklik (çəkisi)
`#block section > .list a`	1.1.2
`div#some`	1.0.1
`#some`	1.0.0
`* .list a`	0.1.1
`.class`	0.1.0
`section h1`	0.0.2
`section`	0.0.1

`style` atributunun çəkisi

HTML-də bir elementin style atributunda yazılan CSS qaydaları, xarici CSS fayllarında və <style> teqində yazılmış qaydalardan daha üstün olur. Bu, style atributunun ən yüksək spesifikliyə malik olması deməkdir.

Məsələn:

<div class="element" id="this" style="color: purple; border: none">
  Some smart text
</div>

div.element#this {
  color: green;
  border: 10px solid red;
}

Burada selektorun spesifikliyi 1.1.1 olsa da, style atributunda yazılmış color: purple üstün tutulur və çərçivə (border) tamamilə yox olur. style atributunun çəkisi 1.0.0.0 olaraq qəbul edilir.

`!important` – Mütləq Üstünlük

!important açar sözü CSS-in bütün qaydalarını pozaraq yazıldığı xüsusiyyəti məcburi şəkildə tətbiq edir. Spesifiklikdən və selektorun çəkisindən asılı olmayaraq, !important həmişə üstün sayılır.

Lakin bu açar söz ehtiyatla istifadə edilməlidir!

Kodun idarə olunmasını çətinləşdirə bilər.
CSS spesifiklik və kaskad qaydalarını poza bilər.

Nəticə

Spesifiklik CSS-də ən vacib anlayışlardan biridir və düzgün başa düşmək, stil qaydalarının gözlənilməz şəkildə işləməsinin qarşısını almağa kömək edir. Selektorların çəki dərəcəsini nəzərə alaraq, style atributu və !important kimi güclü təsirli metodlardan ehtiyatla istifadə etmək lazımdır.