Чем отличается id от class. Разница между class и id на примере тега div. Class или id - что использовать

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

Селектор ID используется для обозначения отдельного HTML-элемента с помощью уникального значения атрибута id . В следующем примере представлен элемент , значением атрибута id которого является header .

В CSS к этому div-элементу можно применять различную стилизацию:

#header { width: 100%; height: 80px; background: blue }

Не забывайте использовать знак # (хэштег ) перед именем. Подробнее об этом можно узнать здесь и здесь .

Селектор class HTML CSS используется для выделения отдельного или целой группы HTML-элементов с идентичным значением атрибута class .

В CSS к нескольким абзацам можно применять различную стилизацию:

Content { margin: 20px 0; line-height: 24px; font-size: 15px }

Не забудьте использовать знак. (точка ) перед названием класса при объявлении CSS-правила . Подробнее об этом можно узнать здесь и здесь .

Cелектор id используется для отдельных элементов страницы (#header ), в то время как селектор class (.content) – для нескольких. Так как значение id задается лишь одному HTML-элементу . Другими словами, у нескольких элементов не может быть одинакового значения id в рамках одной отдельной страницы. Например, у вас может быть только один элемент с id #header , или же один элемент с id #footer .

Одинаковое значение class можно задавать одному или нескольким HTML-элементам . К примеру, у вас может быть несколько абзацев с классом .content или несколько ссылок с классом .external .

Следующий пример поможет лучше понять различия между CSS class и id , а также понять, как правильно использовать:

Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4

Это наш первый абзац.

Это наш второй абзац.

Это наш третий абзац.

Приведенную выше HTML-разметку мы начали с div-элемента container . Мы задали ему id (#container ), так как на нашей странице будет размещаться единственный контейнер. Внутри него мы размещаем разделы меню (#menu ) и контента (#content ). Как и в случае с контейнером, у нас будет только одно меню, и один раздел с контентом. Внутри menu располагаются четыре ссылки , но к каждой из них мы применили CSS class (.link ). Точно также мы применили класс (.text ) к каждому абзацу в div-элементе content .

ID используется для отдельных элементов, которые встречаются на странице только один раз. Например, заголовок, подвал, меню и т. д. Селектор class используется для одного или нескольких элементов, которые встречаются на странице несколько раз. Например, абзацы, ссылки, кнопки, элементы ввода. И хотя вы можете использовать class для отдельного элемента, но лучше использовать эти селекторы по назначению.

Также следует учитывать, что у HTML-элемента может быть указан и id , и class . Предположим, что на странице имеется два блока с одинаковым размером и стилизацией, но с разным позиционированием. В таком случае можно применить один и тот же класс к этим блокам для изменения размеров и стилизации, а затем использовать отдельный ID-селектор к каждому блоку, чтобы задать им разное позиционирование.

Элементы также можно привязывать одновременно к нескольким классам. Это очень удобно, когда нужно применить стилизацию к отдельной группе элементов определенного типа. Например, имеется класс .content , который применен ко всем абзацам. Если нужно будет добавить границу или любую другую стилизацию к нескольким отдельным абзацам, то можно сделать это при помощи дополнительного CSS p class .bordered :

Этот пункт не имеет границ.

Этот пункт имеет границы.

Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Ниже приведен пример CSS-кода :

Content { margin: 10px; font-size: 15px; color: blue } .bordered { border: 2px solid #222 }

Важно правильно применять id и CSS class , так как их неправильное использование может привести к ошибкам в отображении HTML-кода .

Перевод статьи “CSS Class vs ID: Which One to Use ” был подготовлен дружной командой проекта .

Хорошо Плохо

Сегодня уже трудно найти сайт, где не использовался бы такой нужный и важный тег . Посмотрите код любого сайта, который найдете в интернете и увидите, что тег чаще других тегов встречается в HTML документе. Причина такой популярности – это блочная верстка. Иными словами с помощью блочного тега верстаются сайты.

Благодаря этому тегу весь HTML код документа имеет наглядную и логически понятную структуру. В которой легко разобраться не только верстальщику, но и другим специалистам, совместно работающим над одним проектом. Однако тег без своих «сателлитов» - селекторов id и class ничего не стоит.

Классы (class) и идентификаторы (id) выполняют одни и те же задачи. Они задают разные стили для тега , как во внешнем CSS файле, так и внутри документа, через тег style . Тут надо пояснить, что они работают в связке не только с тегом , но и со многими другими тегами.

Рассмотрим на примере ниже следующий код HTML-разметки: