Посвідчення особи - CSS-хитрощі

#idСелектор дозволяє цільової елемент, посилаючись на idатрибут HTML. Подібно до того, як атрибути класу позначаються в CSS з ."крапкою " ( ) перед назвою класу, атрибути ID мають префікс "октоторп" ( #), більш відомий як "хеш" або "знак фунта".

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

Значення атрибута ID мають бути унікальними. HTML з двома або більше однаковими ids не перевіряє і дасть непередбачувані результати. Якщо є два однакових, CSS все одно збігатиметься і стилюватиме обидва. Однак JavaScript при запиті ідентифікатора знаходить перший і зупиняється.

Селектори ID надзвичайно потужні. Вони мають дуже високу специфічність, зазвичай записану як (0, 1, 0, 0). Стилі, застосовані до них, замінюють інші селектори, які використовують лише теги або класи. Демонструвати:

Перевірте цю ручку!

Абзац з ідентифікатором і атрибутом класу дається, що суперечить правилам CSS; навіть незважаючи на те, що селектор класу ( .reusable) знаходиться нижче селектора ідентифікатора ( #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