ID - Triky CSS | Almanach CSS 2025

#idVolič umožňuje zacieliť element odkazom na idatribút HTML. Podobne ako v Atribúte triedy sú atribúty triedy v CSS označené „bodkou“ ( .) pred názvom triedy, pred atribútmi ID má predponu „octothorpe“ ( #), ktorá sa všeobecne nazýva „hash“ alebo „znamienko“.

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

Hodnoty atribútov ID by mali byť jedinečné. HTML s dvoma alebo viacerými identickými ids sa neoveruje a prinesie nepredvídateľné výsledky. Ak existujú dva rovnaké výrazy, štýly CSS sa budú stále zhodovať a budú mať oba štýly. JavaScript však pri vyhľadávaní ID nájde prvý a zastaví sa.

ID selektory sú mimoriadne výkonné. Majú veľmi vysokú špecifickosť, zvyčajne sú napísané ako (0, 1, 0, 0). Aplikácia Štýly prepíše iné selektory, ktoré používajú iba značky alebo triedy. Demonštrovať:

Vyskúšajte toto pero!

Odsek s atribútom ID a class je uvedený v rozpore s pravidlami CSS; aj keď je selektor triedy .reusable( #unique) v CSS pod selektorom ID ( ) (všeobecne by to nadradilo štýly nad ním v „kaskáde“), odsek zostane červený, pretože prepíše #uniquemodrú farbu, ktorú nastavuje .reusable. Nekonečné množstvo tried nikdy nemôže prekonať špecifickosť ID (hoci naraz došlo k chybe, keď 256 tried porazilo ID).

Vysoká špecifickosť a jedinečnosť znamená použitie #id„jadrovej možnosti“ v CSS: nadmerne napájané, nepružné a neprimerane efektívne. Vyhýbanie sa #idselektoru v CSS sa považuje za najlepší postup: takmer v každom prípade je vhodnejšie použiť triedu.

To znamená, že atribúty ID majú mimo CSS niekoľko cenných použití:

Poskytovanie jedinečných háčikov pre JavaScript
Na prvky s idatribútmi je možné zacieliť pomocou kotviacich značiek, nastavením hrefatribútu na idhodnotu, pred ktorou je uvedený #symbol. Kliknutím na tento kotviaci odkaz znova zameriate aktuálnu stránku na prvok so zhodou id. Toto sa nazýva „identifikátor fragmentu“.
Pre skutočne jedinečné prvky vo vašom HTML, ako sú napríklad prvky formulárov, by ID mohli byť užitočné napríklad na prepojenie odkazov labela odkazov input.

Body záujmu

Platný #idnemôže začínať číslom a musí mať aspoň jeden znak. Veľká časť Unicode sú platné znaky v id.
id v atribútoch a selektoroch sa rozlišujú veľké a malé písmená a musia sa presne zhodovať v jazykoch HTML, CSS a JavaScript