ИД - CSS-трикове | CSS алманах 2025

В #idселектора позволява да насочвате елемент чрез съотнасяне на idHTML атрибут. Подобно на това как атрибутите на класа се обозначават в CSS с „точка“ ( .) преди името на класа, атрибутите на ID имат префикс с „октоторп“ ( #), по-известен като „хеш“ или „знак на паунда“.

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

Стойностите на атрибута на ID трябва да бъдат уникални. HTML с две или повече еднакви ids не валидира и ще доведе до непредсказуеми резултати. Ако има две еднакви, CSS все пак ще съвпада и стилизира и двете. JavaScript обаче при заявка за идентификатор ще намери първия и ще спре.

Селекторите за идентификация са изключително мощни. Те имат много висока специфичност, обикновено написана като (0, 1, 0, 0). Стиловете, които се прилагат, заместват другите селектори, които използват само тагове или класове. Демонстрирам:

Вижте тази писалка!

Даден е параграф с атрибут ID и клас, противоречащ на правилата на CSS; въпреки че селекторът на клас ( .reusable) е под селектора на ID ( #unique) в CSS (обикновено ще замени стиловете над него в „каскадата“), абзацът остава червен, тъй като #uniqueзатрупва синия цвят, зададен от .reusable. Безкрайно количество класове никога не могат да победят специфичността на идентификатора (въпреки че имаше грешка по едно време, при която 256 класа биха победили идентификатор).

Високата специфичност и уникалност означава, че използването #idе CSS „ядрен вариант“: свръхмощен, негъвкав и непропорционално ефективен. Избягването на #idселектора в CSS се счита за най-добра практика: за предпочитане е да се използва клас в почти всеки случай.

Като се има предвид това, атрибутите на ID имат няколко ценни приложения извън CSS:

Предоставяне на уникални куки за JavaScript
Елементите с idатрибути могат да бъдат насочени чрез закотвени етикети, като зададете hrefатрибута на idстойността, с префикс от #символ. Кликването върху тази котва ще префокусира текущата страница върху елемента със съответствието id. Това се нарича „идентификатор на фрагменти“.
За наистина уникални елементи във вашия HTML, като елементи на формуляри, идентификаторите могат да бъдат полезни за неща като свързване на labels и inputs.

Точки на интерес

Валидният #idне може да започва с число и трябва да има поне един знак. Голяма част от Unicode са валидни символи в id.
id атрибутите и селекторите са чувствителни към малки и големи букви и трябва да съвпадат точно в HTML, CSS и JavaScript