Co wiesz o specyficzności selektorów CSS?

Specyficzność określa priorytet reguł CSS w przypadku konfliktu, gdy do tego samego elementu stosowane są różne style. Oblicza się ją dla każdego selektora w regule.

Specyficzność to ocena numeryczna składająca się z czterech kategorii (A, B, C, D), zapisywana jako 0,0,0,0. Im wyższa liczba, tym wyższa specyficzność.

Kategorie:

• A (styl inline): Style zdefiniowane przez atrybut style w elemencie HTML. Mają najwyższą specyficzność (np. 1,0,0,0).
• B (ID): Selektory po ID (np. #moje-id). Zwiększają drugą cyfrę (np. 0,1,0,0).
• C (Klasa, Atrybut, Pseudo-klasa): Selektory po klasie (np. .moja-klasa), atrybucie (np. [type="text"]), pseudo-klasie (np. :hover, :first-child). Zwiększają trzecią cyfrę (np. 0,0,1,0).
• D (Element, Pseudo-element): Selektory po tagu HTML (np. div, p) i pseudo-elementach (np. ::before, ::after). Zwiększają czwartą cyfrę (np. 0,0,0,1).

Przykład obliczenia:

• p - 0,0,0,1
• .moja-klasa - 0,0,1,0
• #moje-id - 0,1,0,0
• div p - 0,0,0,2 (suma specyfikacji dwóch elementów)
• #moje-id .moja-klasa - 0,1,1,0 (suma ID i klasy)
• div#moje-id.moja-klasa:hover - 0,1,2,1 (suma elementu, ID, klasy i pseudo-klasy)

Zasady:

1. Specyficzność stylu inline jest zawsze wyższa od dowolnej kombinacji innych selektorów, z wyjątkiem reguł z flagą !important.
2. Reguły z flagą !important mają najwyższy priorytet, nadpisując nawet styl inline. Nie zaleca się używania !important ze względu na trudności w debugowaniu.
3. Przy takiej samej specyficzności, obowiązuje reguła zadeklarowana jako ostatnia w pliku CSS.
4. Selektor uniwersalny (*) i :where() mają specyficzność 0,0,0,0 i nie zwiększają łącznej specyficzności.

/*
  Specyficzność: 0,0,0,1
  Zastosuje się, jeśli nie ma bardziej specyficznych reguł
*/
p {
  color: blue;
}

/*
  Specyficzność: 0,0,1,0
  Nadpisze regułę dla tagu p
*/
.text {
  color: green;
}

/*
  Specyficzność: 0,1,0,0
  Nadpisze regułę dla klasy .text
*/
#glowny-tekst {
  color: red;
}

/*
  Specyficzność: 1,0,0,0
  Zastosuje się, jeśli element ma atrybut style="color: purple;"
*/
/* <p style="color: purple;">Tekst</p> */

/*
  Bardzo wysoka specyficzność, nadpisze wszystko
  Nie zaleca się używania bez konieczności
*/
.override-text {
  color: black !important;
}