CSS selektorlarining o'ziga xosligi haqida nima…

Spesifiklik, turli uslublar bir xil elementga qoʻllanganda CSS qoidalarining ustuvorligini belgilaydi. U har bir qoidadagi selektor uchun hisoblanadi.

Spesifiklik, toʻrt toifadan (A, B, C, D) iborat raqamli baholash boʻlib, 0,0,0,0 shaklida yoziladi. Raqam qanchalik yuqori boʻlsa, spesifiklik shunchalik yuqori boʻladi.

Toifalar:

A (toʻgʻridan-toʻgʻri uslub): HTML elementidagi style atributi bilan belgilangan uslublar. Ular eng yuqori spesifiklikka ega (masalan, 1,0,0,0).
B (ID): ID selektorlar (masalan, #menga-id). Ikkinchi raqamni oshiradi (masalan, 0,1,0,0).
C (Sinf, Atribut, Pseudo-sinf): Sinf selektorlar (masalan, .menga-sinf), atributlar (masalan, [type="text"]), pseudo-sinf (masalan, :hover, :first-child). Ular uchinchi raqamni oshiradi (masalan, 0,0,1,0).
D (Element, Pseudo-element): HTML teglarining selektorlar (masalan, div, p) va pseudo-elementlar (masalan, ::before, ::after). Ular toʻrtinchi raqamni oshiradi (masalan, 0,0,0,1).

Hisoblash misoli:

p - 0,0,0,1
.menga-sinf - 0,0,1,0
#menga-id - 0,1,0,0
div p - 0,0,0,2 (ikki elementning spesifikliklarining yigʻindisi)
#menga-id .menga-sinf - 0,1,1,0 (ID va sinfning yigʻindisi)
div#menga-id.menga-sinf:hover - 0,1,2,1 (teg, ID, sinf va pseudo-sinfning yigʻindisi)

Qoidalar:

toʻgʻridan-toʻgʻri uslubning spesifikligi har doim boshqa selektorlarning har qanday kombinatsiyasidan yuqori boʻladi, !important bayrogʻi bo'lmagan holatlar.
!important bayrogʻi bilan belgilangan qoidalar eng yuqori ustuvorlikka ega boʻlib, hatto satr ichidagi uslubni ham ustun qiladi. !importantdan foydalanish tavsiya etilmaydi, chunki debugging qiyinlashadi.
Agar spesifikliklar teng boʻlsa, CSS faylida oxirgi e'lon qilingan qoidaga amal qilinadi.
Umumiy selektor (*) va :where() ning spesifikligi 0,0,0,0 bo'lib, umumiy spesifiklikni oshirmaydi.

/*
  Spesifiklik: 0,0,0,1
  Agar boshqa aniqroq qoidalar bo'lmasa, qo'llanadi
*/
p {
  color: blue;
}

/*
  Spesifiklik: 0,0,1,0
  p teg uchun qoidani ustun qiladi
*/
.text {
  color: green;
}

/*
  Spesifiklik: 0,1,0,0
  .text sinfi uchun qoidani ustun qiladi
*/
#asosiy-matn {
  color: red;
}

/*
  Spesifiklik: 1,0,0,0
  Elementda `style="color: purple;"` atributi bo'lsa, qo'llanadi
*/
/* <p style="color: purple;">Matn</p> */

/*
  Juda yuqori spesifiklik, hamma narsani ustun qiladi
  Faqat eng zarur hollarda ishlatilishi tavsiya etiladi
*/
.override-text {
  color: black !important;
}

CSS selektorlarining o'ziga xosligi haqida nima bilasiz?