Specyficzność CSS — kalkulator selektorów
Policz specyficzność selektorów CSS i sprawdź, która reguła wygra.
Umieść to narzędzie na swojej stronie
Bezpłatnie, bez rejestracji. Widżet pokazuje na dole napis „Narzędzie udostępnia AMKBIT.pl”.
Jak liczyć
Specyficzność zapisujemy jako trzy liczby (a, b, c). a to identyfikatory (#menu), b klasy, atrybuty i pseudoklasy (.link, [type], :hover), c elementy i pseudoelementy (a, li, ::before). Porównujemy od lewej: jeden identyfikator wygrywa z dowolną liczbą klas. Styl w atrybucie style i !important stoją ponad tą skalą. :where() ma specyficzność zero, a dla :not(), :is() i :has() narzędzie liczy wszystkie argumenty, co bywa przybliżeniem, bo przeglądarka bierze tylko najsilniejszy.
Przykłady
#menu .link:hover a
Jeden identyfikator, klasa i pseudoklasa oraz jeden element: (1, 2, 1).
nav ul li a
Cztery elementy: (0, 0, 4). Przegrywa nawet z jedną klasą.
Najczęstsze pytania
Czy 11 klas pokona identyfikator?
Nie. Liczby się nie przenoszą: (0, 11, 0) jest słabsze niż (1, 0, 0).
Jak uniknąć walki ze specyficznością?
Stylizuj głównie klasami, unikaj identyfikatorów i !important, a ogólne reguły resetu zamykaj w :where().
Poradniki
Wynik ma charakter pomocniczy. Przy ważnych decyzjach (finansowych, technicznych, zdrowotnych) sprawdź go niezależnie. Zasady korzystania.