Разница между 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 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Difference between Class and ID in HTML
In HTML, every element has a unique identification (ID) and can be defined as belonging to a particular class of elements. Class is an attribute that allows the same element to have a different style or appearance. Understanding the difference between ID and class in HTML will help you understand how to use these attributes in your coding. Read on to know more about both ID and Class in HTML and also their usage.
What is an ID in HTML?
An ID is an identification used in HTML to uniquely identify a single element and can not be used more than once on a page. An element with an ID can be styled and identified with CSS using that ID. The ID is enclosed in curly braces, i.e. < >and must start with a letter followed by a combination of letters, numbers, and dashes “-“. Letters must be in lowercase and numbers should be in uppercase. The entire attribute is case-sensitive so if you start the attribute with a capital letter, the ID will not work.
How to use an ID in HTML?
A unique identifier (ID) is used to identify a specific element. For example, if you want to identify a header on your page, you can give it an ID and then write code to make the header stand out. Similarly, you can use an ID to style hyperlinks, anchors, images, paragraphs, and tables. For example, if you want to target a specific image on your page to make it look different, you can use an ID like this:
This is how an element with an unique id is defined in HTML:
Output:
What is Class in HTML?
A class is a type of identifier that is used to mark elements of a similar kind. A class is used to apply CSS to multiple elements on a page. Every element on a page can be given a class name. A class attribute is enclosed in curly braces, i.e. < >and can be defined as a name or a keyword. A class can be used with any HTML element such as a paragraph, a list, etc. Class is a very useful attribute while designing a page because it allows you to style many elements with just a single line of code. For example, you can give the p> tag a class name such as “red” and then use a CSS code to make all p> elements on the page red. This saves you a lot of time and effort as you don’t have to write separate CSS code for each p> element.
How to use Class in HTML?
A class is used to mark a specific element as belonging to a certain type of element. For example, you can use a class to mark a hyperlink as a link to your website’s contact page. Similarly, you can use classes to mark tables, paragraphs, lists, images, anchors, etc.
This is how multiple elements with same class is defined in HTML:
Output:
How to use id and class together?
Any HTML element (div, input, nav, body, etc.) can have both “id” and “class” at the same time. The only difference is that “id” can only have one unique value, whereas “class” can have multiple.
The id and class attributes can be used together to define a style for a particular element. For example:
Output:
Differences between ID and Class in HTML
- An ID is used to identify a single element whereas a class is used to identify a group of elements.
- An ID can be used only once on a page whereas a class can be used multiple times on a page.
- You can define an ID in CSS as # followed by the ID, whereas a class can be defined as. followed by the class name.
- An ID is used as a selector which is followed by #, whereas a class is used as a selector which is followed by. View important HTML Questions asked in interviews.
We have seen a lot of differences between the two. But, when you look at it from the viewpoint of the browser, they are very similar. The main difference between them is that an ID is used to identify a single element whereas a class is used to identify a group of elements. You can use an ID only once on a page whereas you can use classes multiple times on one page. Also, CSS supports both of them but with different syntaxes.
Conclusion
Throughout the article, you have been introduced to the difference between ID and class in HTML and how they are used in coding. It is important to understand the difference between ID and class in HTML because they are used in almost all coding languages. If you really want to get into web development and coding, you need to know the basics of HTML as it is the language used to write all code.
Разница между «ID» и «CLASS» в HTML
Индентификаторы (id) и классы (class) — это «крючки»
Мы можем различными путями описать содержимое HTML-документа. Основные элементы, такие, как <h1>, <p> и <ul> выполняют свою работу, но основной набор тегов не может покрыть каждое возможное оформление страничного элемента или слоя. Для этого нам нужно использовать идентификаторы и классы.
Для примера <ul это даст нам шанс оформить этот маркированный список по своему желанию так, что мы сможем манипулировать его уникальностью отдельно от других маркированных списков на нашей странице. Или мы должны иметь раздел на нашей странице, который не имеет релевантных тегов: <div >
Как вариант, мы имеем боковые боксы для контента, которые мы можем разделить следующим образом: <div >
И какова все-таки разница между ними?
Идентификаторы всегда уникальны для одной страницы
- Каждый элемент может иметь только один ID.
- На каждой странице может быть только один элемент с ID.
Ваш код страницы не пройдет валидацию, если вы используете одинаковые ID более, чем один раз. Так как валидность для нас очень важна, не стоит забывать об уникальности идентификаторов.
Классы не уникальны
- Вы можете использовать одинаковые классы для разных элементов.
- Вы можете использовать разные классы для одинаковых элементов.
Любая информация, необходимая для наложения стилей на разные объекты, может быть описана в class. Для примера – страница с множественными “widget” :
Вы можете использовать имя класса “widget” как крючок, чтобы, например, сделать больше, чем другие, но при этом сохраняя все атрибуты. Вы можете накладывать на один объект более, чем один класс:
Нет необходимости использовать новый класс, просто добавьте новый необходимый класс справа или слева. Эти классы, разделенные через пробел, нормально воспринимаются всеми браузерами в любом количестве (но не стоит доходить до фанатизма и создавать тысячу и более классов для одного элемента).
Идентификаторы имеют специальную функциональность для браузера
Классы не имеет специального функционала в браузерах, в отличии от идентификатора. Идентификаторы имеют очень важное свойство, так называемое «мера упорядочности (hash value)». Например, если вы введете в строке браузера строку ttp://your_site.ru#comments, то браузер попытается найти элемент с идентификатором, равным comments и автоматически совершит прокрутку страницы, чтобы показать этот элемент.
Это и является основой причиной уникальности идентификатора, поэтому ваши браузеры знают куда скроллить.
При обработке джаваскриптом страницы, быстрее всего будут найдены элементы с идентификаторов, чем с классом.
Элемент может содержать оба свойства
Ничто не мешает вам иметь и идентификатор, и класс на одном элементе. На самом деле, это часто очень хорошая идея. Возьмем, к примеру, разметку по умолчанию для элемента списка комментариев:
К нему применен класс, который вам может понадобиться для стилизации всех комментариев на странице, но он также имеет уникальное значение идентификатора (динамически генерируется CMS). Это значение идентификатора полезно для прямой ссылки. Теперь можем легко ссылаться на конкретный комментарий на определенной странице.
CSS все равно
Что касается CSS, вы ничего не можете сделать с идентификатором, такого что вы не можете сделать с классом, и наоборот. Я помню, когда я впервые изучал CSS, и у меня возникла проблема, иногда я пытался устранить неполадки, переключаясь между этими значениями. Нету. CSS не волнует.
Но помним, что вес селектора CSS с идентфиикатором, больше селектора класса.
Javascript
Люди из JavaScript уже, вероятно, более созвучны различиям между классами и идентификаторами. JavaScript зависит от наличия только одного элемента страницы с любым конкретным идентификатором, иначе обычно используемая функция getElementById не будет надежной. Для тех, кто знаком с jQuery, вы знаете, как легко добавлять и удалять классы для элементов страницы. Это встроенная функция jQuery.
Обратите внимание, что такой функции не существует для идентификаторов. JavaScript не несет ответственности за манипулирование этими значениями, это вызовет больше проблем, чем стоило бы.
И да, Javascript значительно быстрее найдет элемент с идентификатором, чем элемент с классом.
Если не нужны, то и не используйте
Как видите, классы и идентификаторы очень важны, и мы полагаемся на них каждый день, чтобы выполнить стилизацию и манипулирование страницами, которые нам нужны. Тем не менее, вы должны использовать их разумно и семантически.
Это значит избегать таких вещей:
Мы уже знаем, что этот элемент является ссылкой, но он еще и якорный элемент. Нет смысла накладывать на него идентификатор, так как мы уже наложили стиль через его тег.
Также избегайте этого:
Идентификатор здесь используется надлежащим образом, так как на странице, скорее всего, будет только один правый столбец, но название неуместно. Попробуйте описать контекст элемента, а не то, где он находится или как он выглядит. Идентификатор здесь «боковой панели» будет более подходящим.
Микроформаты требуют специфические названия классов
Думаешь, микроформаты у тебя не укладываются у тебя в голове? Это не так, всё просто! Это просто обычная разметка, использующая стандартизированные имена классов для информации, которую они содержат. Пример стандартной vCard:
Добавить комментарий ×
При прочих равных условиях, создание документа с class обходится меньшей кровью, чем с id (в общем случае, от 2 до 10% выигрыша). Если принять во внимание, что element.class-селекторы отрабатывают быстрее, чем #id на те же 10%, то общий выигрыш при использовании в документе классов перед идентификаторами составит порядка 15%. В абсолютном значении эти цифры не так велики: для Centrino Duo 1.7 получается цифра примерно в 0,0085мс на 1 идентификатор (в среднем, 3 CSS-правила и 1 употребление).
Для документа со 100 элементами выигрыш может составить почти 1мс, для документа с 1000 — 8,5мс! Средняя страница в интернете имеет 500–1000 элементов (проверить, сколько элементов на странице, можно просто запустив javascript:alert(document.getElementsByTagName(‘*’).length) в адресной строке браузера на какой-либо открытой странице), поэтому это уже то, за что можно побороться.
Однако, значительную нагрузку составляет именно создание DOM-дерева в документе (можно посмотреть, как экспоненциально растет время для Opera, Firefox и Safari) и самого документа (постоянное время в 60мс для IE, которое превосходит все остальные накладные расходы при создании среднего документа). В целом, эти операции уходит от 70% всего времени (т.е. наибольшая экономия достигается за счет минимизации размера дерева и количество HTML-страниц, загружаемых, например, во фрейме, в этой области планируется провести дополнительные исследования).
На скорость вычисления одного элемента по идентификатору, как ни странно, наибольшее влияние оказывает опять-таки DOM-Дерево, чем количество таких элементов. Даже при 1000 элементов с id более половины временных издержек можно урезать, если просто сократить общее число элементов (особенно хорошо это заметно для IE).
В целом же, основных советов два: уменьшайте DOM-дерево и используйте id только в случае действительной необходимости.
Запись множественных атрибутов.
Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:
При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:
Чем отличаются id и class
Один из самых частых вопросов в процессе знакомства с новыми стандартами — в чем разница между атрибутами HTML-элементов «id» и «class». Ведь эффект, вроде бы, одинаковый.
Одинаковый эффект у них только в самых простых случаях использования в CSS. На самом деле отличий полно.
Следствия
Из этой сути прямо или косвенно вытекают остальные отличия, которые видны и в HTML, и в CSS, и в скриптах.
Якорные ссылки Если нужно поставить ссылку на какой-то элемент в странице, то ему достаточно дать id ( <h2 >. </h2> ) и ссылаться на него якорем ( http://site/path/#about ). Это, кстати, предпочтительный способ взамен старого <a name=». «> . Множественные признаки
Элементу можно задавать несколько классов через пробелы: <img > . Причем их можно использовать и по отдельности:
Обратите внимание, что между классами в CSS-правиле нет пробела.
Разный вес в CSS
У каждого правила в CSS есть «вес», по которому определяется порядок их применений. У id этот вес больше. Поэтому если у элемента задан и id, и class:
. то из двух правил
. выиграет первое, цвет заголовка будет зеленым. (Веса правил — это отдельная песня, о ней будет статья в свое время.)
Поиск в скрипте Элемент с «id» можно легко найти в скрипте с помощью функции document.getElementById() . Для классов такой функции нет.
Эта статья — часть находящегося в процессе написания цикла под рабочим названием «Учебник». Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории «Учебник», где они сейчас собраны в обратном хронологическом порядке.
Комментарии: 50
Всю жизнь меня этот вопрос мучал.
Спасибо! 🙂
Просто и понятно написано.
Спасибо. Теперь чуток понятней стало в чем разница.
Двойные классы (в смысле, через пробелы) активно использую. Например, общий класс button и подклассы — bt_add, bt_del, bt_edit. Удобно.
Господа, советую прочитать спецификацию CSS2 (есть и на русском). Она небольшая: вдумчивое чтение займет не так много времени — несколько дней. К тому же, в ней много хороших примеров. Написано, конечно, сухим языком, но к нему быстро привыкаешь. Зато многое сразу станет понятнее.
Можно было и побольше написать, хотя это тоже хорошо, хоть какая-то ясность внесена.
Tomaz кинь такую ссылку
Не очень понятена востребованность конструкции, показанной в примере с якорными ссылками . Насколько часто используется такой прием?
Очень часто. В общем-то, ссылки внутрь страницы лучше именно через id и делать. Это проще выглядит, проще пишется, не требует лишнего пустого элемента <a> и поддерживается всеми браузерами.
Кстати, есть еще в CSS3 интересный псевдокласс для оформления блоков, на которые ссылается якорь. Есть, например HTML:
И тогда, при ссылке на страницу [http://site/path/#about](http://site/path/#about) соответствующий заголовок будет красным. Или можно какую-нибудь стрелочку нарисовать ему через background-image. Но это уж детали.
Знаю, что работает это по крайней мере в Gecko-браузерах, про Оперу и Сафари не знаю.
Я бы сказал, что id следует использовать только если данный элемент будет как-то адресоваться — либо через getElementById, либо через ссылку, либо через . Всё. Ни для чего больше id лучше не использовать, потому что следить за уникальностью довольно сложно.
Для всех CSS-ных фокусов лучше использовать классы, тем более, что у одного элемента их может быть и несколько.
Я не предлагаю использовать id для «CSS’ных фокусов». Я описал дополнительную возможность, как CSS’ом можно оформить текущий адресованный элемент, что, конечно, не является единственным великим смыслом адресации.
И классы тут слегка ни при чем, потому что ими реализовать аналог :target не получится.
Читаю вашу статью и у меня назрел вопрос следующего плана. Допустим есть таблица: 3 колонки и 100 сстрок. а нужно обратиться к средней колонке посредством document.getElementById() например для скрытия, либо отображения вышеупомянутой. Придется чтоли каждой присваивать уникальный id? (например это прайс и количество строк в таблице может варьироваться до нескольких тысяч). Как в таком случае лучше поступить.
Слово «фокусы» я вовсе не в пренебрежительном смысле употребил. А :target — конечно, это же тоже вид адресации.
остальную спецификацию найти, думаю не сложно =)))
Как правило id приходится оставлять программистам 🙂 и пользоваться только классами. На мой взгляд использовать id во многих случаях удобнее.
только об этом подумал. Я только не понял, если у меня несколько элементов с id то что? Вот у меня 3 таблицы. В двух должен быть id в одной нет. Так нельзя делать?
Два (и больше) элемента с одинаковыми id — это нонсенс. Id нужен для того, чтобы точно поименовать один конкретный элемент, чтобы потом к нему обращаться.
Вообще, сама постановка вопроса «лучше пользоваться классами» или «мне нужны два id» неверна. Нужны и те, и другие, это средства достижения разных целей, а не сами цели.
В любом случае, с конкретными вопросами — прошу в форум 🙂
Спасибо за столь понятное разъяснение вопроса.
тут стоит заметить, что ИЕ рассматривает этот код как:
Кстати, есть еще в CSS3 интересный псевдокласс для оформления блоков, на которые ссылается якорь. Есть, например HTML
Более полного и ясного разъяснения не нашёл 🙂
Спасибо.
Пишите больше полезностей!
Благодарный читатель 😉
долго мучался как это обьяснить жене но так и не смог!
а кто может,или мож у каво есть обьяснение того в каких случаях в стилях нужно ставить точку а в каких нет.
просто самомуто понятно но вот чтобы обьяснить, както не получается:-(((
По-моему тут отлично и понятно все расписано :/ Точка ставиться для определения стиля элементов с атрибутом «class» — то есть если стиль будет применяется к группе элементов (одного класса).
Например:
а на html-странице есть несколко елементов:
Знак «#» ставится для определения стиля конкретного элемента, в независимости от его класса (например если этот элемент имеет дополнительные отличия от присвоенного ему класса)
Никакой знак не ставится для некоторых элементов, которые могут быть только в одиночном представлении на странице, например для «body».
Если ошибаюсь, поправьте.
PS: Иван, Вы не могли бы добавить preview для поста, а то как-то неуютно без него отправлять.
Наверное, все таки:
..другое разделение классов.
Нет-нет, я имел в виде именно вот так подряд через точку. Это означает применять правила только к элементам, у которых проставлены оба класса. А «.important, .centered» применится к элементам, у которых есть хотя бы один класс.
к сожалению ие такие вещи не понимает..
Насчет использование id вместо ссылок большое спасибо, уже не один сайт загадил этим самым
<a> , куча мусора лишнего получается.
Спасибо вам Иван, за ваш блог — самый лучший источник информации о css на данный момент. И конечно тоже есть вопросы. Прочитал как-то на сайте у Влада Мержевича статью про XHTML и там было сказано, что именно в XHTML применяется именно id том числе и вместо class. Вопрос такой: насколько уместно в обычном HTML использовать только id, ведь действие идентификаторов так же распространяется на все «меченные» элементы?
Я, честно говоря, ничего не понял. Что такое «id вместо class» и что такое «действие идентификатора распространяется на все меченые элементы»?
Но в любом случае, никакой разницы между HTML и XHTML в этом вопрос нет.
Точно,это я себя в заблуждение ввёл. Перечитал внимательней, разобрался.
тут стоит заметить, что ИЕ рассматривает этот код как:
т.е. следует понимать, что в IE это работает?
Хорошая статья, теперь id буду использовать только для уникальных слоев
с :target четкая фишка. Спасибо!
А я реально не знал 🙂 делал по старинке в хтмле 🙁
полезненько!
Я гдето встречал в CSS такую запись
Имеет ли такая запись какие-то нюансы?
Эта запись означает «элемент div с id main». Что именно подразумевается под нюансами, не понял 🙂
Это одно и тоже, или есть какие-то особенности?
Первое правило сработает для <div> с id=»main» , второе — для любого элемента с id=»main» . Вообще, очень мало причин ограничивать указание id только для конкретного тега. Поэтому обычно пишут просто #main .
очень мало причин ограничивать указание id только для конкретного тега
Вы могли бы назвать эти причины?
Ведь id указывается на странице только один раз. Или разным элементам можно указывать один и тот же id? По-моему нет.
Причина может появиться, когда один и тот же CSS используется для разных страниц на сайте. Тогда может оказаться, что, например, на страницах одного типа есть таблицы с id=»main» , а на других — главный блок с id=»main» . И тогда, чтобы стили для разных по сути вещей не смешивались, будет иметь смысл их разделить. Что не означает, что именно так надо делать. Это просто иллюстрация того, когда это теоретически возможно.
Поправлю Богдана в ответ на вопрос от kir_pich:
точка не ставится для тех элементов, которые зарезервированы в языке html:
А ставится для тех, которые Вы придумали сами:
Тогда всем абзацам, которым вы присвоете
будет изменятся цвет текста на зелёный.
Можно записать и проще:
тогда этот класс можно будет применить к любому элементу, не только к P.
Иван, хотелось бы уточнить сразу такое:
это одно и тоже или есть различия?
Спасибо.
Первая запись означает ссылки с классом «classofa», являющиеся детьми первого уровня «#idofdiv». Вторая запись — таких же детей, но любого уровня.
Маниакальный веблог » Чем отличаются id и class
В последнее время стараюсь не использовать id для стилей, потому что на один тег можно повесить несколько классов, запись глупо смотрится, лучше.
Чтобы такого не было, надо блоки именовать #bl_main, а таблицы #table_main.
Как первый раз сделал сайт по этим статьям, так и продолжаю почерпывать знания из этого чудо-источника. Спасибо Ивану Сагалаеву за очень доступное и наглядное изложение материала!!
Спасибо! Я чайник в вёрстке, она у меня не приоритет (другой профиль), но тут сложный случай попался. Сегодня я понял, что методом тыка буду править шаблон неделю, и пошёл учить матчасть 🙂
спасибо, теперь все понятно
Спасибо. Разобрался. Теперь вопрос меня мучить не будет. Интересно только, будет ли ПС штрафовать за множественные одинаковые id на странице