Co víte o specifikaci CSS selektorů?

Specifičnost určuje prioritu pravidel CSS v případě konfliktu, keď na ten istý prvok platí viacero štýlov. Vypočíta sa pre každý selektor v pravidle.

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

Kategórie:

• A (štýl na riadku): Štýly definované atribútom style v HTML prvku. Majú najvyššiu špecifičnosť (napríklad, 1,0,0,0).
• B (ID): Selektory podľa ID (napríklad, #moje-id). Zvyšujú druhé číslo (napríklad, 0,1,0,0).
• C (Trieda, Atribút, Pseudo-trieda): Selektory podľa triedy (napríklad, .moja-trieda), atribútu (napríklad, [type="text"]), pseudo-triedy (napríklad, :hover, :first-child). Zvyšujú tretie číslo (napríklad, 0,0,1,0).
• D (Prvok, Pseudo-prvok): Selektory podľa HTML tagu (napríklad, div, p) a pseudo-prvky (napríklad, ::before, ::after). Zvyšujú štvrté číslo (napríklad, 0,0,0,1).

Príklad výpočtu:

• p - 0,0,0,1
• .moja-trieda - 0,0,1,0
• #moje-id - 0,1,0,0
• div p - 0,0,0,2 (súčet špecifičností dvoch prvkov)
• #moje-id .moja-trieda - 0,1,1,0 (súčet ID a triedy)
• div#moje-id.moja-trieda:hover - 0,1,2,1 (súčet prvku, ID, triedy a pseudo-triedy)

Pravidlá:

1. Špecifičnosť inline štýlu 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ššiu prioritu, prepíšu aj inline štýl. Používanie !important sa neodporúča kvôli zložitosti ladenia.
3. Pri rovnakom stupni špecifičnosti sa aplikuje pravidlo, ktoré bolo deklarované ako posledné v CSS súbore.
4. Univerzálny selektor (*) a :where() majú špecifičnosť 0,0,0,0 a nezvyšujú celkovú špecifičnosť.

/*
  Špecifičnosť: 0,0,0,1
  Aplikovať sa bude, ak neexistujú viac špecifické pravidlá
*/
p {
  color: blue;
}

/*
  Špecifičnosť: 0,0,1,0
  Prepisuje pravidlo pre prvok p
*/
.text {
  color: green;
}

/*
  Špecifičnosť: 0,1,0,0
  Prepisuje pravidlo pre triedu .text
*/
#hlavny-text {
  color: red;
}

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

/*
  Veľmi vysoká špecifičnosť, prepíše všetko
  Neodporúča sa používať bez extrémnej potreby
*/
.override-text {
  color: black !important;
}