Оба атрибута id и class позволяют задавать стили HTML-элементов в CSS, но их применение отличается. Например, id можно использовать вместо якоря на элемент в HTML-документе, а классы можно применять совместно.




Оба атрибута id и class позволяют задавать стили HTML-элементов в CSS, но их применение отличается.

id

id - это уникальный идентификатор элемента в HTML-документе, т.е. он должен использоваться только для одного элемента на странице. По id к элементу можно обращаться в скрипте

var box1=document.getElementById('box1');

а также переходить по якорной ссылке (внутри страницы) :

<a href="//example.ru/test.html/#rule">Правило</a>
...
<h3 id="rule">Правило</h3>
...
вместо
<h3><a name="rule"></a>Правило</h3>
...

Логично, что id имеет больший приоритет, чем class, и если для элемента задано и то и другое:

<span id="box" class="important">Текст</span>
и
#box {color:green;}
.important {color:red;}

"Текст" будет показан зеленым (green) цветом.

class

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

<img class="class1 class2 class3">

а определять классы в CSS можно как для о тдельного, так и для совместного применения:

.class1 {align:center;}

/* задание атрибутов для совместного применения классов
(между классами нет пробелов) */
.class1.class2 {border:solid black 1px;}

[ref text="Источник" url="//softwaremaniacs.org/blog/2006/01/22/id-class-difference/"]