Czym jest specyficzność w CSS?

Specyficzność w CSS to mechanizm określający, które reguły stylu zostaną zastosowane do elementu, jeśli do tego elementu pasuje kilka reguł.

Każdy selektor ma swoją własną punktację specyficzności. Wyższa punktacja oznacza wyższy priorytet.

Obliczanie specyficzności opiera się na liczbie następujących składników w selektorze (w kolejności malejącej ważności):

Setki (1000): Reguły z !important (posiadają najwyższy priorytet, ale ich użycie nie jest zalecane).
Setki (100): Style inline (pisane bezpośrednio w atrybucie style elementu HTML).
Setki (100): Identyfikatory (selektory po id, np. #moj-elem).
Dziesiątki (10): Klasy (selektory po .klasa), pseudoklasy (np. :hover, :focus), atrybuty (np. [type="text"]).
Jednostki (1): Typy elementów (nazwy tagów HTML, np. div, p), pseudoelementy (np. ::before, ::after).
Zero (0): Selekcja uniwersalna (*), łączniki (>, +, ~), selektory rodzica (:not(), :is(), :where()) same w sobie nie dodają specyficzności, ale mogą wpływać na nią wewnątrz nawiasów.

Przykład obliczenia:

p { ... } - Specyficzność: 0-0-0-1
.moja-klasa { ... } - Specyficzność: 0-0-1-0
#moj-id { ... } - Specyficzność: 0-1-0-0
div.moja-klasa { ... } - Specyficzność: 0-0-1-1
ul > li.klasa[data-id="1"] { ... } - Specyficzność: 0-0-2-2 (li, ul = 2; .klasa, [data-id="1"] = 2)

Jeśli dwie reguły mają tę samą specyficzność, stosuje się tę, która jest niżej w pliku CSS.

Przykład:

/* Plik style.css */
.moja-element {
  kolor: niebieski; /* Specyficzność: 0-0-1-0 */
}

#element-id {
  kolor: czerwony; /* Specyficzność: 0-1-0-0 */
}

.moja-element {
  font-weight: bold; /* Specyficzność: 0-0-1-0, nadpisuje poprzednią regułę o tej samej specyficzności */
}

W tym przypadku tekst elementu z id element-id będzie czerwony, a tekst elementu z klasą moja-element będzie niebieski i pogrubiony (niebieski jest nadpisywany przez czerwony z powodu wyższej specyficzności #element-id).

Zrozumienie specyficzności jest ważne dla pisania przewidywalnego i łatwego do utrzymania CSS. Unikaj nadmiernie skomplikowanej specyficzności i używania !important dla lepszego zarządzania stylami.