Kalkulačka specificity CSS

Výpočet specificity CSS selektorů včetně :is(), :not(), :has() a :where(), barevný rozbor a seřazení podle síly. Anglicky CSS specificity calculator.

Vše se počítá přímo v tomto prohlížeči — žádná data nikam neodcházejí.

Selektory

Specificita

  • Inline styl (atribut style)
  • ID
  • Třída, atribut a pseudotřída
  • Element a pseudo-element
PořadíSelektorInlineABC
1.ul#nav li.active a0113
3.body > main .card:hover0022
2.:is(#header, .nav) a0101
5.:where(.btn) span::before0002
4.input[type="text"]:not(:focus)0021
4.li:nth-child(2n+1 of .item)0021

Nejvyšší specificitu (1,1,3) má ul#nav li.active a. Specificitu přebije jen inline styl, !important nebo pořadí vrstev @layer.

Jak použít: Kalkulačka specificity CSS

Specificita rozhoduje, které pravidlo CSS vyhraje, když se na stejný prvek vztahuje víc selektorů. Počítá se jako trojice čísel (A, B, C): počet ID, počet tříd, atributů a pseudotříd a počet elementů a pseudo-elementů. Kalkulačka ji spočítá i pro :is(), :not(), :has(), :where() a :nth-child(… of S).

  1. Vlož selektory, každý na vlastní řádek. Můžeš vložit i celá pravidla nebo seznam oddělený čárkou.
  2. V tabulce uvidíš barevně rozlišené části selektoru a jejich příspěvek do sloupců A, B a C.
  3. Zapni Seřadit podle specificity a pod tabulkou zjistíš, který selektor vyhraje.

Časté chyby a tipy

Porovnává se zleva
Jedno ID (1,0,0) přebije libovolný počet tříd, třeba (0,15,0). Čísla se nesčítají do jedné hodnoty, porovnávají se sloupec po sloupci.
Snížení specificity
Obal část selektoru do :where() a její specificita klesne na nulu. Hodí se pro výchozí styly knihoven, které má jít snadno přepsat.
Co přebije specificitu
Inline styl v atributu style, deklarace s !important a pořadí kaskádových vrstev @layer mají přednost bez ohledu na specificitu.

Nástroj je zdarma a běží celý v tvém prohlížeči — vložená data se nikam neodesílají ani neukládají.

CSS formátovač a minifikace →

Další nástroje v kategorii Web a ladění

  • JWT dekodér a ověření podpisu Dekódování JWT tokenu, kontrola platnosti (exp, nbf, iat) a ověření podpisu.
  • Tester regulárních výrazů Tester regexů pro JavaScript, PHP, Python, Go, .NET, Javu i Rust: shody, vysvětlení, mapa výrazu, náhrada, testy a hotový kód.
  • Kontrola a vyčištění SVG Kontrola SVG na skripty, zakódované stránky v Base64, vložené soubory, phishingové formuláře a externí zdroje a jejich bezpečné odstranění.
  • Validátor XML feedu pro Heureku a Zboží.cz Kontrola produktového XML feedu podle specifikace Heureka.cz a Zboží.cz: povinné elementy, formát ceny, dostupnosti a EAN, kódy dopravců, duplicitní ITEM_ID a jmenný prostor.
  • Náhled HTML a CSS Bezpečný náhled HTML a CSS v izolovaném rámu s výběrem šířky zařízení.
  • Porovnání dvou textů (diff) Porovnání dvou textů po řádcích, slovech nebo znacích, včetně unified diff.
  • Náhled Markdownu Živý náhled Markdownu (GitHub Flavored) s bezpečným HTML výstupem.
  • Převodník barev (HEX, RGB, HSL, OKLCH) Převod barev mezi HEX, RGB, HSL, HWB, OKLCH a Lab s kontrastem podle WCAG.
  • Vysvětlení cron výrazu Popis cron výrazu česky, výpis dalších spuštění a převod na crontab, systemd timer, launchd (macOS) a Plánovač úloh Windows.
  • Dekodér certifikátů X.509 Rozbor certifikátů X.509: subjekt, platnost, klíč, alternativní názvy, rozšíření a otisky.
  • Porovnání XML Strukturní porovnání dvou XML dokumentů s cestou ke každé změně.
  • Porovnání JSON Sémantické porovnání dvou JSON dokumentů bez ohledu na pořadí klíčů.
  • IP a CIDR kalkulačka Rozbor IPv4 a IPv6 adres a sítí: maska, rozsah hostitelů, broadcast, typ adresy a kontrola příslušnosti.
  • Rozbor řetězce User-Agent Rozpoznání prohlížeče, jádra, operačního systému a zařízení z řetězce User-Agent.
  • Rozbor e-mailových hlaviček Rozbor hlaviček e-mailu: odesílatel, předmět, datum, cesta zprávy přes servery (Received) a všechny hlavičky.
  • ASN.1 / DER dekodér Výpis struktury ASN.1 DER z PEM, Base64 nebo Hex: typy, OID se jmény, vnořené struktury (certifikáty, klíče).
  • Kontrast barev podle WCAG Kontrastní poměr textu a pozadí podle WCAG 2.2 (AA, AAA) a APCA pro barvy v libovolném CSS zápisu, s náhledem a návrhem vyhovující barvy.
  • Kódy kláves v JavaScriptu Stiskni klávesu a uvidíš event.key, event.code, keyCode a location, s ukázkou obsluhy a tabulkou kódů kláves.
  • Porovnání hodnot v JavaScriptu (== a ===) Tabulka, které hodnoty se v JavaScriptu rovnají podle ==, === a Object.is(), s vysvětlením převodu typů krok po kroku.
  • Responzivní logo Jak udělat logo, které se na užší obrazovce zjednoduší: živá ukázka, postup a hotový kód s container query, <picture> nebo SVG spritem.