Čo viete o špecifickosti CSS selektorov?

Špecifickosť určuje prioritu CSS pravidiel pri ich konflikte, keď sa na jeden prvok aplikujú rôzne štýly. Vypočíta sa pre každý selektor v pravidle.

Špecifickosť je číselné hodnotenie pozostávajúce zo štyroch kategórií (A, B, C, D), zapísané ako 0,0,0,0. Čím je číslo väčšie, tým je špecifickosť vyššia.

Kategórie:

• A (inline štýl): Štýly zadané atribútom style v HTML prvku. Majú najvyššiu špecifickosť (napr. 1,0,0,0).
• B (ID): Selektory podľa ID (napr. #my-id). Zvyšujú druhú číslicu (napr. 0,1,0,0).
• C (Trieda, atribút, pseudo-trieda): Selektory podľa triedy (napr. .my-class), atribútu (napr. [type="text"]), pseudo-triedy (napr. :hover, :first-child). Zvyšujú tretiu číslicu (napr. 0,0,1,0).
• D (Prvok, pseudo-prvok): Selektory podľa HTML prvku (napr. div, p) a pseudo-prvkov (napr. ::before, ::after). Zvyšujú štvrtú číslicu (napr. 0,0,0,1).

Príklad výpočtu:

• p - 0,0,0,1
• .my-class - 0,0,1,0
• #my-id - 0,1,0,0
• div p - 0,0,0,2 (súčet špecifickostí dvoch prvkov)
• #my-id .my-class - 0,1,1,0 (súčet špecifickostí ID a triedy)
• div#my-id.my-class:hover - 0,1,2,1 (súčet špecifickostí prvku, ID, triedy a pseudo-triedy)

Pravidlá:

1. Špecifickosť inline štýl je vždy vyššia ako akákoľvek kombinácia iných selektorov, okrem pravidiel s flagom !important.
2. Pravidlá s flagom !important majú najvyšší prioritu, prepisujúc aj inline štýl. Používanie !important sa neodporúča kvôli zložitosti ladenia.
3. Pri rovnakej špecifickosti sa použije pravidlo, ktoré bolo posledné v CSS súbore.
4. Univerzálny selektor (*) a pseudo-trieda :where() majú špecifickosť 0,0,0,0 a nezvyšujú celkovú špecifickosť.

/*
  Špecifickosť: 0,0,0,1
  Aplikovať, ak nie sú prísnejšie pravidlá
*/
p {
  color: blue;
}

/*
  Špecifickosť: 0,0,1,0
  Prepisuje pravidlo pre tag p
*/
.text {
  color: green;
}

/*
  Špecifickosť: 0,1,0,0
  Prepisuje pravidlo pre triedu .text
*/
#main-text {
  color: red;
}

/*
  Špecifickosť: 1,0,0,0
  Bude aplikované, ak prvok má atribút style="color: purple;"
*/
/* <p style="color: purple;">Text</p> */

/*
  Veľmi vysoká špecifickosť, prepíše všetko
  Neodporúča sa používať bez krajnej núdze
*/
.override-text {
  color: black !important;
}