Чем отличается class от id в html

Селекторы типа, класса и ID

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

Необходимые условия:	Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:	Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.

Селекторы типа

Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.

Попробуйте добавить CSS-правило, чтобы выбрать элемент и изменить его цвет на синий.

Универсальный селектор

Универсальный селектор обозначается звёздочкой ( * ). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.

Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.

Использование универсального селектора для облегчения чтения ваших селекторов

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

article :first-child  font-weight: bold; > 

Однако этот селектор можно спутать с article:first-child , который выберет любой элемент , являющийся первым дочерним элементом другого элемента .

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента или первым дочерним элементом любого потомка элемента :

article *:first-child  font-weight: bold; > 

Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.

Селекторы класса

Селектор класса начинается с символа точки ( . ). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight , и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.

Нацеливание классов на отдельные элементы

Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим с классом highlight иначе, чем заголовок с классом highlight . Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.

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

Нацеливание на элемент, к которому применено более одного класса

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

В примере ниже у нас есть , содержащий примечание. Серая граница применяется когда блок имеет класс notebox . Если у блока есть также класс warning или danger , мы меняем border-color (en-US).

Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему не применён ни один стиль, так как он имеет только класс danger ; ему нужен ещё и класс notebox , чтобы получить какую-нибудь стилизацию.

Селекторы ID

Селектор ID начинается с # , а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один id . Можно выбрать элемент, которому присвоен id , а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:

**Предупреждение:**Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.

Примечание: Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

В следующей статье

Мы продолжим изучение селекторов и рассмотрим селекторы атрибута.

В этом модуле

1. Каскад и наследование
2. Селекторы CSS
   • Селекторы типа, класса и ID
   • Селекторы атрибута
   • Псевдоклассы и псевдоэлементы
   • Комбинаторы
3. Модель коробки (The box model)
4. Фон и границы
5. Обработка разных направлений текста
6. Переполнение содержимого
7. Значения и единицы измерения
8. Изменение размеров в CSS
9. Элементы изображений, форм и медиа-элементы
10. Стилизация таблиц
11. Отладка CSS
12. Организация вашей CSS (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Изучаем CSS: class или id – что лучше?

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

Как применять CSS-селектор ID

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

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

#header

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

Как применять CSS-селектор class

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

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

.content

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

Чем отличаются CSS Class и ID

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 .

Если нужно стилизовать эти элементы, то можно использовать следующий пример:

#container < width: 1080px; margin: 0 auto; background: #eee >#menu < height: 90px; background: #ddd >.link < color: #000; text-decoration: none >#content < padding: 20px >.text

Когда используется class, а когда id?

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

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

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

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

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

.content < margin: 10px; font-size: 15px; color: blue >.bordered

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

Атрибуты HTML class и id.

Довольно часто, просматривая исходный код многих HTML-страниц, можно видеть добавление к HTML-элементам двух атрибутов:

Посмотрите, скажем, на это изображение:

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

Как вы можете видеть из примера выше, атрибуты class и id имеют значение, которое указывается после знака «=».

class="значение"

id="значение"

Возникает вопрос, что же можно указывать в качестве этого значения?

Значением этих атрибутов может быть:

+ Любая комбинация букв и цифр латинского алфавита [a-zA-Z0-9] знака «-» и «_».

НО, получившаяся комбинация не должна начинаться:

+ Двух знаков тире «—«

Таким образом значение атрибутов class и id придумываете вы сами.

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

Пример абзаца

Добавление атрибута class или id, само по себе, никаких изменений во внешний вид элемента не вносит. Давайте в этом сейчас убедимся.

Пример абзаца без атрибутов
Пример абзаца с атрибутом class
 

Так для чего же нужны эти атрибуты?

С их помощью вы даете элементам на странице что-то вроде уникального номера-названия.

Это чем-то похоже, когда в деревне каждую корову нумеруют специальной меткой, по которой ее потом можно будет отличить от других коров.

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

Дав имя элементу с помощью атрибута class или id, вы отделяете какой-то абзац от всех остальных элементов на странице. Точно также можно выделить любой другой элемент на странице.

Таким образом, добавляя элементам на веб-странице атрибуты id или class мы просто даем им имена.

Теперь, когда у элемента есть имя, к нему можно обращаться и легко находить его среди других элементов. Этим успешно пользуются такие технологии как CSS и язык Javascript. С помощью значений этих атрибутов они легко находят нужный элемент в коде и производят с ним нужные действия.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Разница между id и class?

Собственно использую как id так и class в div.
Но вижу разницу лишь в CSS, а именно в # и . перед названием.
Знаю еще, что id главнее чем class и сперва обрабатывается он.

Если я вообще не буду использовать id, не помешает ли это?
А если я не буду использовать только class?
Или использовать все вместе выгодно?

• Вопрос задан более трёх лет назад
• 7539 просмотров

Комментировать
Решения вопроса 1

Имя Имечко @Elem3nt071 Автор вопроса

class будет указывать на группу элементов:
div.title — все элементы дивы класса title (. ).
.title — все элементы класса title (. )

id — идентификатор какого-либо конкретного элемента HTML (должен быть уникальным).
#title — один конкретный элемент с (. ).