Kas ir specifitāte CSS?

CSS specifiskums ir mehānisms, kas nosaka, kurš stila noteikums tiks pievienots elementam, ja ir piemērojami vairāki noteikumi.

Katram selektoram ir savs specifiskuma punkti. Augstāks punkti nozīmē augstāku prioritāti.

Specifikuma aprēķins balstās uz šādiem komponentiem selektorā (no svarīgākā uz mazāk svarīgu):

• Simts (1000): noteikumi ar !important (tie ir ar augstāko prioritāti, bet to lietošana nav ieteicama).
• Simts (100): iekšējie stili (rakstīti tieši HTML elementa style atribūtā).
• Simts (100): identifikatori (selektori pēc id, piemēram, #my-element).
• Desmiti (10): klases (selektori pēc .class), псевдoklases (piemēram, :hover, :focus), atribūti (piemēram, [type="text"]).
• Vienības (1): elementu tipi (HTML tagu nosaukumi, piemēram, div, p), псевдоelementi (piemēram, ::before, ::after).
• Nulle (0): universālais selektors (*), kombinatori (>, +, ~), vecāku selektors (:not(), :is(), :where()) paši par sevi nesniedz specifiskumu, bet var ietekmēt specifiskumu iekavās.

Piemērs aprēķinam:

• p { ... } - Specifiskums: 0-0-0-1
• .my-class { ... } - Specifiskums: 0-0-1-0
• #my-id { ... } - Specifiskums: 0-1-0-0
• div.my-class { ... } - Specifiskums: 0-0-1-1
• ul > li.item[data-id="1"] { ... } - Specifiskums: 0-0-2-2 (li, ul = 2; .item, [data-id="1"] = 2)

Ja divi noteikumi ir ar vienādu specifiskumu, tiek piemērots tas, kas atrodas CSS faila apakšā.

Piemērs:

/* style.css fails */
.my-element {
  color: blue; /* Specifiskums: 0-0-1-0 */
}

#element-id {
  color: red; /* Specifiskums: 0-1-0-0 */
}

.my-element {
  font-weight: bold; /* Specifiskums: 0-0-1-0, pārklāj iepriekšējo noteikumu ar tādu pašu specifiskumu */
}

Šajā gadījumā elementa ar ID element-id teksts būs sarkans, bet elementa ar klasi my-element — zils un biezs (zils pārklāj sarkanu, jo tam ir augstāka specifiskuma #element-id).

Specifiskuma saprašana ir svarīga, lai rakstītu prognozējamu un viegli uzturamu CSS. Izvairieties no pārāk sarežģītas specifiskuma un izmantojiet !important labākai stilu pārvaldībai.