Ko jūs zināt par CSS selektoru specifiku?

Specifiskums nosaka CSS noteikumu prioritāti to konfliktu gadījumā, kad vienam elementam tiek piemēroti dažādi stili. Tas tiek aprēķināts katram selektoram noteikumā.

Specifiskums ir skaitliska novērtējuma vērtība, kas sastāv no četriem kategorijām (A, B, C, D), uzrakstīta kā 0,0,0,0. Jo lielāks skaitlis, jo augstāks specifiskums.

Kategorijas:

• A (tiešais stils): Stili, kas noteikti ar style atribūtu HTML elementā. Tie ir visaugstākās specifiskuma (piemēram, 1,0,0,0).
• B (ID): Selektori pēc ID (piemēram, #my-id). Tie palielina otro ciparu (piemēram, 0,1,0,0).
• C (Klase, atribūts, pseudo-klase): Selektori pēc klases (piemēram, .my-class), atribūta (piemēram, [type="text"]), pseudo-klases (piemēram, :hover, :first-child). Tie palielina trešo ciparu (piemēram, 0,0,1,0).
• D (Elements, pseudo-elements): Selektori pēc HTML elementa (piemēram, div, p) un pseudo-elementiem (piemēram, ::before, ::after). Tie palielina ceturto ciparu (piemēram, 0,0,0,1).

Piemērs aprēķinam:

• p - 0,0,0,1
• .my-class - 0,0,1,0
• #my-id - 0,1,0,0
• div p - 0,0,0,2 (divu elementu summa)
• #my-id .my-class - 0,1,1,0 (ID un klases summa)
• div#my-id.my-class:hover - 0,1,2,1 (elementa, ID, klases un pseudo-klases summa)

Noteikumi:

1. inline style specifiskums vienmēr ir augstāks par jebkuru citu selektoru kombināciju, izņemot ar !important zīmi norādītās noteikumu.
2. Noteikumi ar !important zīmi ir ar visaugstāko prioritāti, pārspējot pat inline stilus. To lietošana nav ieteicama, jo tas sarežģī pārbaudi.
3. Vienādā specifiskumā tiek piemērots pēdējais CSS failā deklarētais noteikums.
4. Universālais selektors (*) un :where() pseudo-klase ir ar specifiskumu 0,0,0,0 un nesamazina kopējo specifiskumu.

/*
  Specifiskums: 0,0,0,1
  Tiek piemērots, ja nav specifiskāku noteikumu
*/
p {
  color: blue;
}

/*
  Specifiskums: 0,0,1,0
  Pārdefinē `p` elementa noteikumu
*/
.text {
  color: green;
}

/*
  Specifiskums: 0,1,0,0
  Pārdefinē `.text` klases noteikumu
*/
#main-text {
  color: red;
}

/*
  Specifiskums: 1,0,0,0
  Tiks piemērots, ja elements ir ar atribūtu style="color: purple;"
*/
/* <p style="color: purple;">Teksts</p> */

/*
  Ļoti augsta specifiskums, pārspēj visu
  Nav ieteicams lietot bez nepieciešamības
*/
.override-text {
  color: black !important;
}