რა არის სპეციფიკაცია CSS-ში?

CSS-ში სპეციფიკობა — ეს მექანიზმია, რომელიც განსაზღვრავს, რომელი სტილის წესი იქნება გამოყენებული ელემენტზე, თუ ამ ელემენტზე რამდენიმე წესი ვრცელდება.

ყოველ სელექტორს აქვს თავისი სპეციფიკობის ქულა. მაღალი ქულა ნიშნავს მაღალი პრიორიტეტს.

სპეციფიკობის გამოთვლა ეფუძნება შემდეგ კომპონენტების რაოდენობას სელექტორში (მნიშვნელობის მიხედვით):

• სატყობინო (1000): წესები !important-ით (მაღალი პრიორიტეტი აქვთ, მაგრამ მათი გამოყენება არ არის რეკომენდებული).
• სატყობინო (100): ინლაინის სტილები (შესწორებულია HTML-ის style ატრიბუტში).
• სატყობინო (100): იდენტიფიკატორები (სელექტორები id-ზე, მაგალითად #my-element).
• ათი (10): კლასები (სელექტორები .class), псევდოკლასები (მაგ., :hover, :focus), ატრიბუტები (მაგ., [type="text"]).
• ერთი (1): ელემენტის ტიპები (HTML ტეგების სახელები, მაგალითად div, p), псევდოელემენტები (მაგ., ::before, ::after).
• ნული (0): უნივერსალური სელექტორი (*), კომბინატორები (>, +, ~), მშობლის სელექტორი (:not(), :is(), :where()) თავად არ ზრდის სპეციფიკობას, მაგრამ შეიძლება გავლენა იქონიოს კოვზების შიგნით.

მოყვანილი მაგალითები:

• p { ... } - სპეციფიკობა: 0-0-0-1
• .my-class { ... } - სპეციფიკობა: 0-0-1-0
• #my-id { ... } - სპეციფიკობა: 0-1-0-0
• div.my-class { ... } - სპეციფიკობა: 0-0-1-1
• ul > li.item[data-id="1"] { ... } - სპეციფიკობა: 0-0-2-2 (li, ul = 2; .item, [data-id="1"] = 2)

თუ ორი წესის სპეციფიკობა ერთნაირია, გამოიყენება ის, რომელიც მდებარეობს ქვემოთ CSS ფაილში.

მაგალითი:

/* style.css ფაილი */
.my-element {
  color: blue; /* სპეციფიკობა: 0-0-1-0 */
}

#element-id {
  color: red; /* სპეციფიკობა: 0-1-0-0 */
}

.my-element {
  font-weight: bold; /* სპეციფიკობა: 0-0-1-0, გადაფარავს წინანდელ წესს იგივე სპეციფიკობით */
}

ამ შემთხვევაში, element-id-ის ID-ით განსაზღვრული ელემენტის ტექსტი იქნება წითელი, ხოლო my-element კლასით განსაზღვრული ტექსტი — ლურჯი და მჭიდრო (ლურჯი გადაფარავს წითელს, რადგან #element-id უფრო მაღალი სპეციფიკობითაა).

სპეციფიკობის გაგება მნიშვნელოვანია, რათა დაწეროთ პროგნოზირებადი და ადვილად შენარჩუნებადი CSS. თავიდან აიცილეთ ზედმეტად რთული სპეციფიკობა და გამოიყენეთ !important უკეთესად სტილების მართვისთვის.