ID - CSS-trükkök | CSS Almanach 2025

A #idválasztó segítségével megcélozhat egy elemet a idHTML attribútum hivatkozásával . Hasonlóan ahhoz, ahogyan az osztályattribútumokat a CSS-ben egy „pont” ( .) jelöli az osztálynév előtt, az ID-attribútumokat egy „oktotorpussal” ( #), előtte pedig „hash” vagy „font” jelzővel látják el.

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

Az ID attribútum értékeinek egyedinek kell lenniük. Két vagy több azonos ids- val rendelkező HTML nem érvényesít, és kiszámíthatatlan eredményeket fog hozni. Ha kettő van egyforma, akkor a CSS továbbra is egyezik és stílusba hozza mindkettőt. A JavaScript azonban az azonosító lekérdezésekor megtalálja az elsőt és a leállást.

Az ID-választók rendkívül hatékonyak. Nagyon specifikusak, általában (0, 1, 0, 0). A velük alkalmazott stílusok felülbírálják azokat a többi választót, amelyek csak címkéket vagy osztályokat használnak. Demonstrálni:

Nézze meg ezt a tollat!

Az azonosítóval és class attribútummal rendelkező bekezdések ellentmondanak a CSS-szabályoknak; Annak ellenére, hogy az osztályválasztó ( .reusable) #uniquea CSS alatt van az ID-választó ( ) alatt (a „kaszkádban” általában felülírja a felette lévő stílusokat), a bekezdés piros marad, mert #uniquefelülírja a beállított kék színt .reusable. Végtelen mennyiségű osztály soha nem tudja legyőzni az azonosító specifikációját (bár egyszerre volt olyan hiba, ahol 256 osztály verte meg az azonosítót).

A magas specifikusság és egyediség azt jelenti, hogy #ida CSS „nukleáris opciója”: túlhajtott, rugalmatlan és aránytalanul hatékony. A #idválasztó elkerülése a CSS-ben bevált gyakorlatnak tekinthető: célszerű szinte minden esetben osztályt használni.

Ennek ellenére az ID attribútumoknak számos értékes felhasználása van a CSS-en kívül:

Egyedi horgok biztosítása a JavaScript számára
Az idattribútumokkal rendelkező elemeket horgonycímkékkel lehet megcélozni úgy, hogy az hrefattribútumot idegy #szimbólummal előtagolt értékre állítják . Az adott horgony linkre kattintva az aktuális oldal újból a megfelelő elemre fókuszálódik id. Ezt „töredékazonosítónak” nevezzük.
A HTML-ben valóban egyedi elemek, például az űrlapelemek esetében az azonosítók hasznosak lehetnek például az labels és inputs összekapcsolásához .

Látványosság

Az érvényes #idnem kezdődhet számmal, és legalább egy karakter hosszúnak kell lennie. Az Unicode nagy része érvényes karakter az id.
id az attribútumok és a kijelölők megkülönböztetik a kis- és nagybetűket, és pontosan meg kell egyezniük a HTML, CSS és a JavaScript között