Specificity (xüsusilik) — brauzerın eyni elementə bir neçə CSS qaydası(rule) tətbiq olunduqda hansını seçəcəyini müəyyən edən bir sistemdir. Sadə dillə desək, CSS qaydaları arasında "kim daha güclüdür?" sualının cavabıdır. Brauzer bütün qaydaları oxuyur, sonra ən yüksək xüsusiliyi olan qaydanı tətbiq edir.

Niyə bu problem yaranır?

Yazdığınız CSS-də eyni elementə müxtəlif yerlərdən müxtəlif stillər gələ bilər. Məsələn, həm p selektoru, həm .metn class-ı, həm də #basliq id-si eyni elementə fərqli rənglər təyin edə bilər. Brauzer bunların hamısını görür — amma yalnız birini tətbiq edə bilər. Məhz bu zaman specificity işə düşür.

Specificity necə hesablanır?

Hər selektor növünün öz "xal" dəyəri var. Bunları belə xatırlamaq olar:

• ID selektoru → 100 xal → #header
• Class selektoru → 10 xal → .card
• Element selektoru → 1 xal → p, div, h1
• Inline style → 1000 xal → style="color: red"

Yəni 1 id, 10 class-dan daha güclüdür. 1 inline style isə hamısını üstələyir.

Nümunə ilə izah:

p { color: blue; } /* 1 xal */

.metn { color: green; } /* 10 xal */

#basliq { color: red; } /* 100 xal */

Əgər bir <p> elementinin həm .metn class-ı, həm də #basliq id-si varsa — rəng qırmızı olacaq, çünki ID-nin xalı ən yüksəkdir.

!important nədir?

CSS-də !important yazaraq istənilən qaydanı zorla üstün edə bilərsiz:

p { color: blue !important; }

Bu qayda specificity-dən asılı olmayaraq həmişə qazanır. Amma !important-dan çox istifadə etmək tövsiyə olunmur — kodu anlamaq çətinləşir və gələcəkdə problemlər yarana bilər.

Niyə vacibdir?

Specificity-ni başa düşməyən developer-lər tez-tez "niyə stilim işləmir?" sualı ilə üzləşirlər. Yazdığınız CSS tətbiq olunmursa, çox güman ki başqa bir qayda daha yüksək specificity-yə sahibdir. Bunu bilmək CSS xətalarını tapmağı və düzəltməyi çox asanlaşdırır.