ID - CSS-хитрости | CSS Альманах 2024

#idСелектор позволяет целевой элемент, ссылаясь на idатрибут HTML. Подобно тому, как атрибуты класса обозначаются в CSS с «точкой» ( .) перед именем класса, атрибуты ID имеют префикс «octothorpe» ( #), более известный как «решетка» или «знак решетки».

#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 классов превзошли идентификатор).

Высокая специфичность и уникальность означает, что использование #idCSS является «ядерным вариантом»: чрезмерно мощным, негибким и непропорционально эффективным. Отказ от #idселектора в CSS считается наилучшей практикой: предпочтительно использовать класс почти в каждом случае.

При этом атрибуты ID имеют несколько ценных применений за пределами CSS:

Предоставление уникальных хуков для JavaScript
Элементы с idатрибутами могут быть нацелены на теги привязки, установив для hrefатрибута idзначение с префиксом #символа. Щелчок по этой якорной ссылке перефокусирует текущую страницу на соответствующий элемент id. Это называется «идентификатором фрагмента».
Для действительно уникальных элементов в вашем HTML, таких как элементы формы, идентификаторы могут быть полезны для таких вещей, как связывание labels и inputs.

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

Действительный #idзнак не может начинаться с числа и должен состоять как минимум из одного символа. Большая часть Unicode - допустимые символы в id.
id атрибуты и селекторы чувствительны к регистру и должны точно совпадать в HTML, CSS и JavaScript.