HTML
Классы и идентификаторы
Классы и идентификаторы облегчают обращение к элементам HTML из сценариев и таблиц стилей. Атрибут class может использоваться в одном или нескольких тегах и используется CSS для стилизации. Однако идентификаторы предназначены для обозначения одного элемента, что означает, что один и тот же идентификатор никогда не должен использоваться дважды. Идентификаторы обычно используются с JavaScript и внутренними ссылками документа и не рекомендуется в CSS. В этом разделе содержатся полезные пояснения и примеры относительно правильного использования атрибутов класса и идентификатора в HTML.
Синтаксис
- class2 class3"
параметры
| параметр | подробности |
|---|---|
| учебный класс | Указывает класс элемента (не уникальный) |
| Я бы | Указывает идентификатор элемента (уникальный в том же контексте) |
замечания
- Оба class и id являются глобальными атрибутами и поэтому могут быть привязаны к любому элементу HTML.
- Имена классов должны начинаться с буквы (AZ или az), за которой могут следовать буквы, цифры, дефисы и символы подчеркивания.
- В HTML5 атрибуты class и id могут использоваться для любого элемента. В HTML 4.0.1 они были недоступны для тегов <base> , <head> , <html> , <meta> , <param> , <script> , <style> и <title> .
- Элемент может иметь один или несколько классов. Классы разделяются пробелами и сами не могут содержать пробелы.
- Элемент может иметь только один идентификатор, и он должен быть уникальным в своем контексте (т.е. веб-странице). Идентификаторы также не могут содержать пробелы.
Предоставление элемента класса
Классы — это идентификаторы для элементов, которым они назначены. Используйте атрибут class чтобы назначить класс элементу.
Чтобы назначить несколько классов элементу, отделите имена классов пробелами.
Использование классов в CSS
Классы могут использоваться для стилизации определенных элементов без изменения всех элементов такого типа. Например, эти два элемента span могут иметь совершенно разные стили:
Классы с одинаковым именем могут быть предоставлены любому количеству элементов на странице, и все они получат стиль, связанный с этим классом. Это всегда будет верно, если вы не укажете элемент внутри CSS.
Например, у нас есть два элемента: оба с highlight класса:
Если наш CSS такой, как показано ниже, то зеленый цвет будет применен к тексту в обоих элементах:
Однако, если мы хотим только нацеливать div на highlight класса, мы можем добавить определенность, как показано ниже:
Тем не менее, при стилизации с помощью CSS обычно рекомендуется использовать только классы (например, .highlight ), а не элементы с классами (например, div.highlight ).
Как и любой другой селектор, классы могут быть вложенными:
Вы также можете связать селектор классов только с элементами, имеющими комбинацию из нескольких классов. Например, если это наш HTML:
И мы хотим покрасить эту определенную часть текста розовым, мы можем сделать следующее в нашем CSS:
Предоставление элемента идентификатора
Атрибут ID элемента — это идентификатор, который должен быть уникальным во всем документе. Его цель состоит в том, чтобы однозначно идентифицировать элемент при связывании (с использованием привязки), написании сценариев или стилизации (с помощью CSS).
У вас не должно быть двух элементов с одинаковым идентификатором в одном документе, даже если атрибуты привязаны к двум различным типам элементов. Например, следующий код неверен:
Браузеры сделают все возможное, чтобы сделать этот код, но неожиданное поведение может возникнуть при стилизации с помощью CSS или добавлении функциональности с помощью JavaScript.
Чтобы ссылаться на элементы по их идентификатору в CSS, префикс ID с # .
Чтобы перейти к элементу с идентификатором на заданной странице, добавьте # с именем элемента в URL.
Эта функция поддерживается в большинстве браузеров и не требует дополнительного JavaScript или CSS для работы.
Проблемы, связанные с дублируемыми идентификаторами
Наличие более одного элемента с одним и тем же идентификатором — проблема с устранением неполадок. Парсер HTML обычно пытается отобразить страницу в любом случае. Обычно ошибка не возникает. Но темпы могут оказаться на неправильной веб-странице.
Селекторы CSS все еще работают
Но JavaScript не справляется с обоими элементами:
В этом случае переменная html несет только первое содержимое div ("a") .
Допустимые значения
Для идентификатора
Единственными ограничениями на значение id являются:
- он должен быть уникальным в документе
- он не должен содержать пробелов
- он должен содержать хотя бы один символ
Таким образом, значением могут быть все цифры, только одна цифра, только знаки пунктуации, включают специальные символы, что угодно. Просто нет пробелов.
Таким образом, они действительны:
Это также неверно, если включено в тот же документ:
Значение id должно начинаться с буквы, которая затем может выполняться только:
- буквы (AZ / az)
- цифры (0-9)
- дефисы ("-")
- подчеркивания ("_")
- colons (":")
- периоды (".")
Ссылаясь на первую группу примеров в вышеприведенном HTML5, допустимо только одно:
Они также действительны:
Опять же, если он не начинается с буквы (в верхнем или нижнем регистре), это недействительно.
Для класса
Правила для классов по существу те же, что и для id . Разница в том, что значения class не обязательно должны быть уникальными в документе.
Ссылаясь на приведенные выше примеры, хотя это недопустимо в одном документе:
Это совершенно нормально:
Важное примечание. Как значения идентификатора и класса обрабатываются вне HTML
Имейте в виду, что приведенные выше правила и примеры применяются в контексте HTML.
Использование чисел, знаков препинания или специальных символов в значении id или class может вызвать проблемы в других контекстах, таких как CSS, JavaScript и регулярные выражения.
Например, хотя в HTML5 допустим следующий id :
. это неверно в CSS:
4.1.3. Персонажи и случай
В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы ISO 10646 U + 00A0 и выше, плюс дефис (-) и подчеркивание ( _); они не могут начинаться с цифры, двух дефисов или дефисов, за которыми следует цифра . (выделено мной)
В большинстве случаев вы можете избегать символов в контекстах, где у них есть ограничения или особый смысл.
# Classes and IDs
Classes and IDs make referencing HTML elements from scripts and stylesheets easier. The class attribute can be used on one or more tags and is used by CSS for styling. IDs however are intended to refer to a single element, meaning the same ID should never be used twice. IDs are generally used with JavaScript and internal document links, and are discouraged in CSS. This topic contains helpful explanations and examples regarding proper usage of class and ID attributes in HTML.
# Giving an element a class
Classes are identifiers for the elements that they are assigned to. Use the class attribute to assign a class to an element.
To assign multiple classes to an element, separate the class names with spaces.
# Using classes in CSS
Classes can be used for styling certain elements without changing all elements of that kind. For example, these two span elements can have completely different stylings:
Classes of the same name can be given to any number of elements on a page and they will all receive the styling associated with that class. This will always be true unless you specify the element within the CSS.
For example, we have two elements, both with the class highlight :
If our CSS is as below, then the color green will be applied to the text within both elements:
However, if we only want to target div ‘s with the class highlight then we can add specificity like below:
Nevertheless, when styling with CSS, it is generally recommended that only classes (e.g. .highlight ) be used rather than elements with classes (e.g. div.highlight ).
As with any other selector, classes can can be nested:
You can also chain the class selector to only select elements that have a combination of several classes. For example, if this is our HTML:
And we want to colour this specific piece of text pink, we can do the following in our CSS:
# Giving an element an ID
The ID attribute of an element is an identifier which must be unique in the whole document. Its purpose is to uniquely identify the element when linking (using an anchor), scripting, or styling (with CSS).
You should not have two elements with the same ID in the same document, even if the attributes are attached to two different kinds of elements. For example, the following code is incorrect:
Browsers will do their best to render this code, but unexpected behavior may occur when styling with CSS or adding functionality with JavaScript.
To reference elements by their ID in CSS, prefix the ID with # .
To jump to an element with an ID on a given page, append # with the element name in the URL.
This feature is supported in most browsers and does not require additional JavaScript or CSS to work.
# Acceptable Values
# For an ID
The only restrictions on the value of an id are:
- it must be unique in the document
- it must not contain any space characters
- it must contain at least one character
So the value can be all digits, just one digit, just punctuation characters, include special characters, whatever. Just no whitespace.
So these are valid:
This is invalid:
This is also invalid, when included in the same document:
An id value must begin with a letter, which can then be followed only by:
- letters (A-Z/a-z)
- digits (0-9)
- hyphens ("-")
- underscores ("_")
- colons ("��
- periods (".")
Referring to the first group of examples in the HTML5 section above, only one is valid:
These are also valid:
Again, if it doesn’t start with a letter (uppercase or lowercase), it’s not valid.
# For a Class
The rules for classes are essentially the same as for an id . The difference is that class values do not need to be unique in the document.
Referring to the examples above, although this is not valid in the same document:
This is perfectly okay:
# Important Note: How ID and Class values are treated outside of HTML
Keep in mind that the rules and examples above apply within the context of HTML.
Using numbers, punctuation or special characters in the value of an id or a class may cause trouble in other contexts, such as CSS, JavaScript and regular expressions.
For example, although the following id is valid in HTML5:
. it is invalid in CSS:
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. (emphasis added)
In most cases you may be able to escape characters in contexts where they have restrictions or special meaning.
# W3C References
# Problems related to duplicated IDs
Having more than one element with the same ID is a hard to troubleshoot problem. The HTML parser will usually try to render the page in any case. Usually no error occurs. But the pace could end up in a mis-behaving web page.
In this example:
CSS selectors still work
But JavaScript fails to handle both elements:
In this case html variable bears only the first div content ("a") .
Разница между class и id на примере тега div
Сегодня уже трудно найти сайт, где не использовался бы такой нужный и важный тег <div>. Посмотрите код любого сайта, который найдете в интернете и увидите, что тег <div> чаще других тегов встречается в HTML документе. Причина такой популярности – это блочная верстка. Иными словами с помощью блочного тега <div> верстаются сайты.
Благодаря этому тегу весь HTML код документа имеет наглядную и логически понятную структуру. В которой легко разобраться не только верстальщику, но и другим специалистам, совместно работающим над одним проектом. Однако тег <div> без своих «сателлитов» — селекторов id и class ничего не стоит.
Классы и идентификаторы
Классы (class) и идентификаторы (id) выполняют одни и те же задачи. Они задают разные стили для тега <div>, как во внешнем CSS файле, так и внутри документа, через тег style. Тут надо пояснить, что они работают в связке не только с тегом <div>, но и со многими другими тегами.
Рассмотрим на примере ниже следующий код HTML-разметки:
Зададим внешний вид HTML документу с помощью CSS файла стилей:
/* знак # перед именем — обозначение id */
#content <
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
>
/* (.) перед именем обозначает class */
.content <
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
>
Имена id и class задает сам разработчик произвольно, исходя из смысловой нагрузки. Мы назвали их просто content. Нельзя давать имена русскими буквами, можно использовать цифры, символ дефиса (-) и подчеркивания (_).
Мы видим два абсолютно одинаковых блока. К верхнему блоку применяется селектор id, а к нижнему блоку применятся селектор class. Вы спросите, где же разница между div-ами id и class? Чисто внешне, пока никакой разницы, до тех пор, пока мы применяем по одному id и class на одну страницу.
В чем тогда различие между class и id?
Различие кроется в самом названии id, значит идентификатор, то есть уникальный. Главное отличие от классов в том, что селектор id может использоваться на странице только один раз. Селектор class, наоборот может применяться на одной странице бесконечное количество раз.
.content /* может применяться к любым тегам */
div.content /* применяется только к тегам div с классом .content */
div#content /* для id такая запись не имеет смысла, он уникален */
Так же стоит отметить, что у id свойств выше приоритет, чем у свойств классов.
Этот пример наглядно демонстрирует, что несмотря на то, что class с синим текстом находится ниже, текст все равно красный. Если бы id не имел приоритета, то текст был бы синий.
Кроме того конкретному тегу можно задавать несколько классов, перечисляя их через пробел. Такая система позволяет не создавать лишних классов, а использовать их более эффективно. У id селектора разумеется такой возможности нет.
Есть еще одно важное отличие, оно касается программистов. Если планируется обратиться к элементу HTML документа через язык JavaScript, то обязательно надо применять id, реализовывать это через классы намного сложнее.
Когда лучше использовать id, а когда class?
Если на странице какой-нибудь из элементов, например, шапка сайта, меню, кнопка, используется только один раз, то надо применять id. Селектор class применяется к одному тегу или к разным тегам столько раз, сколько раз они прописаны на странице. Например, картинки, маркированные списки, абзацы.
В заключении хочу дать дружественный совет всем тем, кто хочет научиться самостоятельно создавать сайты. Очень долго и не эффективно черпать знания о сайтостороении из статей и уроков. Обратите внимание на мой видеокурс по данной тематике. Это один из лучших курсов для начинающих.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
What's the difference between an id and a class?
What’s the difference between <div > and <div > when it comes to CSS? Is it alright to use <div > ?
I see different developers doing this in both ways, and since I’m self taught, I’ve never really figured it out.
17 Answers 17
ids must be unique where as class can be applied to many things. In CSS, id s look like #elementID and class elements look like .someClass
In general, use id whenever you want to refer to a specific element and class when you have a number of things that are all alike. For instance, common id elements are things like header , footer , sidebar . Common class elements are things like highlight or external-link .
It’s a good idea to read up on the cascade and understand the precedence assigned to various selectors: http://www.w3.org/TR/CSS2/cascade.html
The most basic precedence you should understand, however, is that id selectors take precedence over class selectors. If you had this:
The text would be red because the id selector takes precedence over the class selector.
Perhaps an analogy will help understanding the difference:
Student ID cards are distinct. No two students on campus will have the same student ID card. However, many students can and will share at least one Class with each other.
It’s okay to put multiple students under one Class title, such as Biology. But it’s never acceptable to put multiple students under one student ID.
When giving Rules over the school intercom system, you can give Rules to a Class:
«Tomorrow, all students are to wear a red shirt to Biology class.»
Or you can give rules to a Specific Student, by calling his unique ID:
«Jonathan Sampson is to wear a green shirt tomorrow.»
In this case, Jonathan Sampson is receiving two commands: one as a student in the Biology class, and another as a direct requirement. Because Jonathan was told directly, via the id attribute, to wear a green shirt, he will disregard the earlier request to wear a red shirt.
The more specific selectors win.
Where to use an ID versus a class
The simple difference between the two is that while a class can be used repeatedly on a page, an ID must only be used once per page. Therefore, it is appropriate to use an ID on the div element that is marking up the main content on the page, as there will only be one main content section. In contrast, you must use a class to set up alternating row colors on a table, as they are by definition going to be used more than once.
IDs are an incredibly powerful tool. An element with an ID can be the target of a piece of JavaScript that manipulates the element or its contents in some way. The ID attribute can be used as the target of an internal link, replacing anchor tags with name attributes. Finally, if you make your IDs clear and logical, they can serve as a sort of “self documentation” within the document. For example, you do not necessarily need to add a comment before a block stating that a block of code will contain the main content if the opening tag of the block has an ID of, say, «main», «header», «footer», etc.