Co je to specifikita v CSS?

Specifičnost v CSS je mechanismus, který určuje, které pravidlo stylu bude aplikováno na prvek, pokud je na něj aplikováno několik pravidel.

Každý selektor má svůj vlastní bodový systém specifikace. Vyšší skóre znamená vyšší prioritu.

Výpočet specifikace je založen na počtu následujících složek v selektoru (v pořadí od nejdůležitějšího):

• Stovky (1000): Pravidla s !important (mají nejvyšší prioritu, ale jejich použití se nedoporučuje).
• Stovky (100): Inline styly (přímo zapsané v atributu style HTML prvku).
• Stovky (100): Identifikátory (selektory podle id, například #moje-prvko).
• Desítky (10): Třídy (selektory podle .trida), pseudotřídy (například :hover, :focus), atributy (například [type="text"]).
• Jednotky (1): Typy prvků (názvy HTML tagů, například div, p), pseudoelementy (například ::before, ::after).
• Nula (0): Univerzální selektor (*), kombinátory (>, +, ~), rodičovské selektory (:not(), :is(), :where()) samy o sobě nepřidávají specifikaci, ale mohou ovlivnit specifikaci uvnitř závorek.

Příklad výpočtu:

• p { ... } - Specifikace: 0-0-0-1
• .má-trida { ... } - Specifikace: 0-0-1-0
• #můj-id { ... } - Specifikace: 0-1-0-0
• div.má-trida { ... } - Specifikace: 0-0-1-1
• ul > li.trida[data-id="1"] { ... } - Specifikace: 0-0-2-2 (li, ul = 2; .trida, [data-id="1"] = 2)

Pokud mají dva pravidla stejnou specifikaci, aplikuje se to, které je níže v CSS souboru.

Příklad:

/* soubor style.css */
.moje-prvko {
  barva: modrá; /* Specifikace: 0-0-1-0 */
}

#prvko-id {
  barva: červená; /* Specifikace: 0-1-0-0 */
}

.moje-prvko {
  font-weight: bold; /* Specifikace: 0-0-1-0, přepíše předchozí pravidlo se stejnou specifikací */
}

V tomto případě bude text prvku s ID prvko-id červený, a text prvku s třídou moje-prvko bude modrý a tučný (modrý je přepsán červenou kvůli vyšší specifikaci #prvko-id).

Porozumění specifikaci je důležité pro psaní předvídatelného a snadno udržovatelného CSS. Vyvarujte se příliš složité specifikace a používání !important pro lepší správu stylů.