CSS-də xüsusiçilik nədir?

CSS-də xüsusiqlik, bir elementə tətbiq olunan stil qaydasını müəyyən edən mexanizmdir, əgər həmin elementə bir neçə qayda tətbiq olunursa.

Hər bir seçici öz xüsusiqlik balına malikdir. Daha yüksək bal daha yüksək prioriteti göstərir.

Xüsusqlik hesablaması seçicidəki aşağıdakı komponentlərin sayına əsaslanır (əhəmiyyətinə görə azalan sırayla):

• Yüzlər (1000): !important ilə qeyd olunan qaydalar (ən yüksək prioritetə malikdir, lakin onların istifadəsi tövsiyə edilmir).
• Yüzlər (100): Birbaşa inline stillər (HTML elementinin style atributunda yazılır).
• Yüzlər (100): Tanımlayıcılar (məsələn, #mənim-elementim).
• Onlar (10): Siniflər (məsələn, .sinif), pseudoklaslar (məsələn, :hover, :focus), atributlar (məsələn, [type="text"]).
• Birliklər (1): Element tipləri (HTML tag adları, məsələn, div, p), pseudoelementlər (məsələn, ::before, ::after).
• Sıfır (0): Ümumi seçici (*), birləşdiricilər (>, +, ~), valideyn seçicilər (:not(), :is(), :where()) özləri xüsusiqlik əlavə etmir, lakin mötərizələr daxilində təsir göstərə bilərlər.

Hesablama nümunəsi:

• p { ... } - Xüsusiyyət: 0-0-0-1
• .mənim-sinifim { ... } - Xüsusiyyət: 0-0-1-0
• #mənim-id { ... } - Xüsusiyyət: 0-1-0-0
• div.mənim-sinifim { ... } - Xüsusiyyət: 0-0-1-1
• ul > li.sinif[data-id="1"] { ... } - Xüsusiyyət: 0-0-2-2 (li, ul = 2; .sinif, [data-id="1"] = 2)

Əgər iki qayda eyni xüsusiqlikdədirsə, CSS faylında aşağıda yerləşən qayda tətbiq olunur.

Nümunə:

/* style.css faylı */
.mənim-elementim {
  rəng: mavi; /* Xüsusiyyət: 0-0-1-0 */
}

#element-id {
  rəng: qırmızı; /* Xüsusiyyət: 0-1-0-0 */
}

.mənim-elementim {
  font-weight: bold; /* Xüsusiyyət: 0-0-1-0, əvvəlki eyni xüsusiyyətli qaydanı üstələyir */
}

Bu halda, element-id identifikatoruna malik elementin mətni qırmızı, və mənim-elementim sinfinə malik elementin mətni mavi və qalın olacaq (mavi, #element-id-nin daha yüksək xüsusiqliyi səbəbindən qırmızı ilə üst-üstə düşür).

Xüsusiyyətin anlaşılması, CSS-i proqnozlaşdırıla bilən və asanlıqla saxlanılan etmək üçün vacibdir. Həddindən artıq mürəkkəb xüsusiqlikdən və !important istifadə etməkdən çəkinin, beləliklə, stilləri daha yaxşı idarə edə bilərsiniz.