HTML
Классы и идентификаторы

Вступление

Синтаксис

• class = "class1 class2 class3"
• ID = "UniqueID"

параметры

замечания

Предоставление элемента класса

Классы - это идентификаторы для элементов, которым они назначены. Используйте атрибут class чтобы назначить класс элементу.

<div class="example-class"></div>

Чтобы назначить несколько классов элементу, отделите имена классов пробелами.

<div class="class1 class2"></div>

Использование классов в CSS

Классы могут использоваться для стилизации определенных элементов без изменения всех элементов такого типа. Например, эти два элемента span могут иметь совершенно разные стили:

<span></span>
<span class="special"></span>

Классы с одинаковым именем могут быть предоставлены любому количеству элементов на странице, и все они получат стиль, связанный с этим классом. Это всегда будет верно, если вы не укажете элемент внутри CSS.

Например, у нас есть два элемента: оба с highlight класса:

<div class="highlight">Lorem ipsum</div>
<span class="highlight">Lorem ipsum</span>

Если наш CSS такой, как показано ниже, то зеленый цвет будет применен к тексту в обоих элементах:

.highlight { color: green; }

Однако, если мы хотим только нацеливать div на highlight класса, мы можем добавить определенность, как показано ниже:

div.highlight { color: green; }

Тем не менее, при стилизации с помощью CSS обычно рекомендуется использовать только классы (например, .highlight ), а не элементы с классами (например, div.highlight ).

Как и любой другой селектор, классы могут быть вложенными:

.main .highlight { color: red; } /* Descendant combinator */ 
.footer > .highlight { color: blue; } /* Child combinator */ 

Вы также можете связать селектор классов только с элементами, имеющими комбинацию из нескольких классов. Например, если это наш HTML:

<div class="special left menu">This text will be pink</div>

И мы хотим покрасить эту определенную часть текста розовым, мы можем сделать следующее в нашем CSS:

.special.left.menu { color: pink; } 

Предоставление элемента идентификатора

Атрибут ID элемента - это идентификатор, который должен быть уникальным во всем документе. Его цель состоит в том, чтобы однозначно идентифицировать элемент при связывании (с использованием привязки), написании сценариев или стилизации (с помощью CSS).

<div id="example-id"></div>

У вас не должно быть двух элементов с одинаковым идентификатором в одном документе, даже если атрибуты привязаны к двум различным типам элементов. Например, следующий код неверен:

<div id="example-id"></div>
<span id="example-id"></span>

Браузеры сделают все возможное, чтобы сделать этот код, но неожиданное поведение может возникнуть при стилизации с помощью CSS или добавлении функциональности с помощью JavaScript.

Чтобы ссылаться на элементы по их идентификатору в CSS, префикс ID с # .

#example-id { color: green; }

Чтобы перейти к элементу с идентификатором на заданной странице, добавьте # с именем элемента в URL.

http://example.com/about#example-id

Эта функция поддерживается в большинстве браузеров и не требует дополнительного JavaScript или CSS для работы.

Проблемы, связанные с дублируемыми идентификаторами

Наличие более одного элемента с одним и тем же идентификатором - проблема с устранением неполадок. Парсер HTML обычно пытается отобразить страницу в любом случае. Обычно ошибка не возникает. Но темпы могут оказаться на неправильной веб-странице.

В этом примере:

<div id="aDiv">a</div>
<div id="aDiv">b</div>

Селекторы CSS все еще работают

#aDiv {
    color: red;
}

Но JavaScript не справляется с обоими элементами:

var html = document.getElementById("aDiv").innerHTML;

В этом случае переменная html несет только первое содержимое div ("a") .

Допустимые значения

Для идентификатора

<div id="container"> ... </div>
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

<div id=" "> ... </div>

<div id="results"> ... </div>
<div id="results"> ... </div>

<div id="container"> ... </div>

<div id="sampletext"> ... </div>
<div id="sample-text"> ... </div>
<div id="sample_text"> ... </div>
<div id="sample:text"> ... </div>
<div id="sample.text"> ... </div>

Для класса

Правила для классов по существу те же, что и для id . Разница в том, что значения class не обязательно должны быть уникальными в документе.

Ссылаясь на приведенные выше примеры, хотя это недопустимо в одном документе:

<div id="results"> ... </div>
<div id="results"> ... </div>

Это совершенно нормально:

<div class="results"> ... </div>
<div class="results"> ... </div>

Важное примечание. Как значения идентификатора и класса обрабатываются вне HTML

Имейте в виду, что приведенные выше правила и примеры применяются в контексте HTML.

Использование чисел, знаков препинания или специальных символов в значении id или class может вызвать проблемы в других контекстах, таких как CSS, JavaScript и регулярные выражения.

Например, хотя в HTML5 допустим следующий id :

<div id="9lions"> ... </div>

... это неверно в CSS:

4.1.3. Персонажи и случай

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы ISO 10646 U + 00A0 и выше, плюс дефис (-) и подчеркивание ( _); они не могут начинаться с цифры, двух дефисов или дефисов, за которыми следует цифра . _{(выделено мной)}

В большинстве случаев вы можете избегать символов в контекстах, где у них есть ограничения или особый смысл.

Ссылки W3C

• 3.2.5.1 Атрибут id
• 3.2.5.7 Атрибут class
• 6.2 Основные типы SGML