ID - Triky CSS | Almanach CSS 2025

#idVolič umožňuje cílit element odkazem na idatribut HTML. Podobně jako u atributů tříd jsou v CSS označeny tečkou ( .) před názvem třídy, před atributy ID je předpona „octothorpe“ ( #), běžněji označovaná jako „hash“ nebo „znak libry“.

#header ( /* this is the ID selector */ background: #eee; )

Hodnoty atributů ID by měly být jedinečné. HTML se dvěma nebo více identickými ids se nevaliduje a přinese nepředvídatelné výsledky. Pokud existují dva stejné, CSS bude stále odpovídat a stylovat oba. JavaScript však při dotazování na ID najde první a zastaví se.

ID selektory jsou extrémně výkonné. Mají velmi vysokou specifičnost, obvykle psanou jako (0, 1, 0, 0). Styly platí s nimi přepsat jiné selektory, které používají pouze značky nebo třídy. Předvést:

Podívejte se na toto pero!

Odstavec s atributem ID i třídy je uveden v rozporu s pravidly CSS; i když je selektor třídy .reusable( #unique) v CSS pod selektorem ID ( ) (obecně by v „kaskádě“ přepisoval styly nad ním), odstavec zůstane červený, protože #uniquepřemůže modrou barvu, kterou nastavuje .reusable. Nekonečné množství tříd nikdy nemůže porazit specifičnost ID (i když v té době došlo k chybě, kdy 256 tříd porazilo ID).

Vysoká specifičnost a jedinečnost znamenají použití #id„jaderné možnosti“ CSS: nadměrně napájené, nepružné a nepřiměřeně účinné. Vyhýbání se #idselektoru v CSS je považováno za osvědčený postup: téměř v každém případě je lepší použít třídu.

Atributy ID mají mimo CSS několik cenných využití:

Poskytování jedinečných háčků pro JavaScript
Na prvky s idatributy lze cílit pomocí značek ukotvení, nastavením hrefatributu na idhodnotu předponu #symbolu. Kliknutím na tento kotevní odkaz znovu zaostříte aktuální stránku na prvek s odpovídajícím id. Tento jev se nazývá „identifikátor fragmentu“.
U skutečně jedinečných prvků ve vašem HTML, jako jsou prvky formulářů, by ID mohla být užitečná například pro propojení labels a inputs.

Body zájmu

Platný #idnemůže začínat číslem a musí mít alespoň jeden znak. Velká část Unicode jsou platné znaky v id.
id atributy a selektory rozlišují velká a malá písmena a musí se přesně shodovat v HTML, CSS a JavaScriptu