რა იცით CSS-ის სელექტორების სპეციფიკობაზე?

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

სპეციფიკაობა არის რიცხვითი შეფასება, რომელიც შედგება ოთხ კატეგორიად (A, B, C, D), დაწერილი როგორც 0,0,0,0. რაც უფრო დიდი რიცხვია, მით უფრო მაღალია სპეციფიკაცია.

კატეგორიები:

• A (inline სტილი): სტილები, რომლებიც მითითებულია style ატრიბუტით HTML ელემენტში. აქვთ უმაღლესი სპეციფიკაცია (მაგალითად, 1,0,0,0).
• B (ID): ID-ის მიხედვით სელექტორები (მაგალითად, #my-id). ზრდიან მეორე ციფრს (მაგალითად, 0,1,0,0).
• C (კლასი, ატრიბუტი, პსევდოკლასი): კლასი (მაგალითად, .my-class), ატრიბუტი (მაგალითად, [type="text"]), პსევდოკლასი (მაგალითად, :hover, :first-child). ზრდიან მესამე ციფრს (მაგალითად, 0,0,1,0).
• D (ელემენტი, პსევდოელემენტი): HTML ტეგის სელექტორები (მაგალითად, div, p) და პსევდოელემენტები (მაგალითად, ::before, ::after). ზრდიან მეოთხე ციფრს (მაგალითად, 0,0,0,1).

სათაური გამოთვლა:

• p - 0,0,0,1
• .my-class - 0,0,1,0
• #my-id - 0,1,0,0
• div p - 0,0,0,2 (ორივე ტეგის ჯამური სპეციფიკაცია)
• #my-id .my-class - 0,1,1,0 (ID და კლასი ჯამში)
• div#my-id.my-class:hover - 0,1,2,1 (ტეგი, ID, კლასი და პსევდოკლასი ჯამში)

წესები:

1. inline style სპეციფიკაცია ყოველთვის მაღალია ნებისმიერი სხვა სელექტორის კომბინაციაზე, გარდა !important ნიშნით მითითებული წესების.
2. წესები !important ნიშნით უმაღლეს პრიორიტეტს ფლობენ, მათ even inline-საც გადააწყვეტენ. გამოყენება !important არ არის რეკომენდებული, რადგან რთულდება დათვალიერება.
3. ერთნაირი სპეციფიკაციით, გამოიყენება ბოლო დადგენილი წესის პრიორიტეტი.
4. უნივერსალური სელექტორი (*) და :where() პსევდოკლასი არ ზრდიან სპეციფიკაციას და არ ახდენენ გავლენას საერთო სპეციფიკაციაზე.

/*
  სპეციფიკაცია: 0,0,0,1
  გამოიყენება, თუ უფრო სპეციფიკური წესები არ არსებობს
*/
p {
  color: blue;
}

/*
  სპეციფიკაცია: 0,0,1,0
  შეცვლის p-ის წესს
*/
.text {
  color: green;
}

/*
  სპეციფიკაცია: 0,1,0,0
  შეცვლის `.text` კლასის წესს
*/
#main-text {
  color: red;
}

/*
  სპეციფიკაცია: 1,0,0,0
  გამოიყენება, თუ ელემენტს აქვს ატრიბუტი style="color: purple;"
*/
/* <p style="color: purple;">ტექსტი</p> */

/*
  ძალიან მაღალი სპეციფიკაცია, შეცვლის ყველა წესს
  გამოყენება არ არის რეკომენდებული, თუ ეს არ არის აუცილებელი
*/
.override-text {
  color: black !important;
}