CSS Specificity Kalkulátor

K čemu je CSS Specificity Kalkulátor

Pokud píšeš CSS déle než týden, určitě znáš ten moment — přidáš styl, obnovíš stránku, a nic. Přitom si jistý, že selektor je správně. Problém skoro vždy tkví ve specificitě: jiný selektor má vyšší váhu a tvůj styl prostě prohraje. Tohle trápí hlavně webaře, kteří pracují s cizími šablonami, WordPress tématy nebo frameworky jako Bootstrap.

Kalkulátor ti okamžitě ukáže numerickou váhu libovolného selektoru — rozloženou na tři složky (ID, třídy/atributy/pseudotřídy, elementy). Nemusíš nic počítat v hlavě ani hledat v dokumentaci. Zadáš selektor, vidíš výsledek.

Hodí se i freelancerům, kteří přebírají rozestavěné projekty po někom jiném — místo slepého přidávání `!important` pochopíš, proč se co chová, jak se chová. Všechno běží v prohlížeči, nic se neposílá na server.

Co umí

• Spočítá specifitu libovolného CSS selektoru (včetně složených a kombinovaných)
• Zobrazí váhu rozloženou na složky: ID / třídy+atributy+pseudotřídy / elementy
• Vizuálně zvýrazní, která část selektoru váhu nejvíc ovlivňuje
• Porovná dva selektory a řekne ti, který „vyhraje"
• Upozorní na použití `!important` a inline stylů jako speciálních případů

Jak to funguje

1. Do vstupního pole vlož CSS selektor — třeba `.nav ul > li.active a:hover`.
2. Kalkulátor ho okamžitě rozloží na části a přiřadí každé složce číselnou hodnotu.
3. Vidíš celkové skóre ve formátu (0, 0, 0) — tři čísla odpovídají třem kategoriím váhy.
4. Volitelně zadáš druhý selektor do srovnávacího pole.
5. Nástroj ti ukáže, který selektor má vyšší prioritu — a proč.

Časté otázky

Proč mi nestačí prostě přidat `!important`?

`!important` sice přebíjí specifitu, ale vytváří technický dluh — příště budeš muset přidat další `!important`, a pak další. Pochopení specificity ti pomůže psát CSS čistěji a udržitelněji. Pokud čistíš starší kód, hodí se k tomu taky CSS Cleaner.

Funguje kalkulátor i pro pseudoelementy jako `::before`?

Ano, pseudoelementy jako `::before` nebo `::after` se počítají jako elementy (třetí složka), stejně jako `::first-line`. Pseudotřídy jako `:hover` nebo `:nth-child()` patří do druhé složky.

Jak se počítá inline styl nebo atribut `style=""`?

Inline styly mají vlastní úroveň specificity nad rámec tří složek — jsou silnější než jakýkoliv selektor v externím nebo interním CSS. Kalkulátor na tuto situaci upozorní.

Proč vidím výsledek (0,1,0) a (0,0,3) — které je silnější?

Složky se porovnávají zleva doprava. `(0,1,0)` je silnější než `(0,0,3)`, protože jedna třída vždy přebíjí libovolný počet elementových selektorů.