Один из самых частых вопросов в процессе знакомства с новыми стандартами — в чем разница между атрибутами HTML-элементов "id" и "class". Ведь эффект, вроде бы, одинаковый.

Одинаковый эффект у них только в самых простых случаях использования в CSS. На самом деле отличий полно.

Суть

id
уникальное собственное имя элемента на странице, то есть на странице не должно быть нескольких элементов с одним id. Например блоку с шапкой сайта можно дать id="title".
class
вольный признак, который дается обычно нескольким элементам, чтобы отличать их от других. Например, картинкам, которые просто сопровождают текст, можно дать class="decor", а картинкам, которые важны для понимания текста — class="content".

Следствия

Из этой сути прямо или косвенно вытекают остальные отличия, которые видны и в HTML, и в CSS, и в скриптах.

Якорные ссылки
Если нужно поставить ссылку на какой-то элемент в странице, то ему достаточно дать id (<h2 id="about">...</h2>) и ссылаться на него якорем (http://site/path/#about). Это, кстати, предпочтительный способ взамен старого <a name="...">.
Множественные признаки

Элементу можно задавать несколько классов через пробелы: <img class="important centered printable">. Причем их можно использовать и по отдельности:

/* все important элементы */
.important {color:red;}

... и в сочетании:

/* элементы с important и centered одновременно */
.important.centered {border:solid black 1px;}

Обратите внимание, что между классами в CSS-правиле нет пробела.

Разный вес в CSS

У каждого правила в CSS есть "вес", по которому определяется порядок их применений. У id этот вес больше. Поэтому если у элемента задан и id, и class:

<h2 id="about" class="important">...</h2>

... то из двух правил

#about     {color:green;}
.important {color:red;}

... выиграет первое, цвет заголовка будет зеленым. (Веса правил — это отдельная песня, о ней будет статья в свое время.)

Поиск в скрипте
Элемент с "id" можно легко найти в скрипте с помощью функции document.getElementById(). Для классов такой функции нет.

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

Комментарии: 50

  1. Denya

    Всю жизнь меня этот вопрос мучал.
    Спасибо! :)

    Просто и понятно написано.

  2. Krivetsky

    Спасибо. Теперь чуток понятней стало в чем разница.

  3. Elf

    Двойные классы (в смысле, через пробелы) активно использую. Например, общий класс button и подклассы - bt_add, bt_del, bt_edit... Удобно.

  4. Tomaz

    Господа, советую прочитать спецификацию CSS2 (есть и на русском). Она небольшая: вдумчивое чтение займет не так много времени - несколько дней. К тому же, в ней много хороших примеров. Написано, конечно, сухим языком, но к нему быстро привыкаешь. Зато многое сразу станет понятнее.

  5. Sega

    Можно было и побольше написать, хотя это тоже хорошо, хоть какая-то ясность внесена.
    Tomaz кинь такую ссылку

  6. Tomaz
  7. wj

    Не очень понятена востребованность конструкции, показанной в примере с якорными ссылками . Насколько часто используется такой прием?

  8. Иван Сагалаев

    Очень часто. В общем-то, ссылки внутрь страницы лучше именно через id и делать. Это проще выглядит, проще пишется, не требует лишнего пустого элемента <a> и поддерживается всеми браузерами.

    Кстати, есть еще в CSS3 интересный псевдокласс для оформления блоков, на которые ссылается якорь. Есть, например HTML:

    <h2 id="about">О сайте</h2>
    <p>... ...
    

    и CSS:

    h2:target {
      color:red;
    }
    

    И тогда, при ссылке на страницу [http://site/path/#about](http://site/path/#about) соответствующий заголовок будет красным. Или можно какую-нибудь стрелочку нарисовать ему через background-image... Но это уж детали.

    Знаю, что работает это по крайней мере в Gecko-браузерах, про Оперу и Сафари не знаю...

  9. Давид Мзареулян

    Я бы сказал, что id следует использовать только если данный элемент будет как-то адресоваться — либо через getElementById, либо через ссылку, либо через

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

  10. Иван Сагалаев

    Я не предлагаю использовать id для "CSS'ных фокусов"... Я описал дополнительную возможность, как CSS'ом можно оформить текущий адресованный элемент, что, конечно, не является единственным великим смыслом адресации.

    И классы тут слегка ни при чем, потому что ими реализовать аналог :target не получится.

  11. Dron

    Читаю вашу статью и у меня назрел вопрос следующего плана... Допустим есть таблица: 3 колонки и 100 сстрок. а нужно обратиться к средней колонке посредством document.getElementById() например для скрытия, либо отображения вышеупомянутой... Придется чтоли каждой присваивать уникальный id? (например это прайс и количество строк в таблице может варьироваться до нескольких тысяч). Как в таком случае лучше поступить.

  12. Иван Сагалаев
  13. Давид Мзареулян

    Слово «фокусы» я вовсе не в пренебрежительном смысле употребил. А :target — конечно, это же тоже вид адресации.

  14. .grin!

    конкретно каскад ("вес") в очень понятном виде.
    http://experiment.net.ru/css2/?f=cascade.html#cascade

    остальную спецификацию найти, думаю не сложно =)))

  15. Linoch-ka

    Как правило id приходится оставлять программистам :) и пользоваться только классами. На мой взгляд использовать id во многих случаях удобнее.

  16. Стасюк

    только об этом подумал. Я только не понял, если у меня несколько элементов с id то что? Вот у меня 3 таблицы. В двух должен быть id в одной нет. Так нельзя делать?

  17. Иван Сагалаев

    Два (и больше) элемента с одинаковыми id — это нонсенс. Id нужен для того, чтобы точно поименовать один конкретный элемент, чтобы потом к нему обращаться.

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

    В любом случае, с конкретными вопросами — прошу в форум :-)

  18. ELV1S

    Спасибо за столь понятное разъяснение вопроса.

  19. dark-demon

    .important.centered {border:solid black 1px;}

    тут стоит заметить, что ИЕ рассматривает этот код как:

    .important, .centered {border:solid black 1px;}
    

    Кстати, есть еще в CSS3 интересный псевдокласс для оформления блоков, на которые ссылается якорь. Есть, например HTML

    ну и пример от меня: http://dark-demon.nm.ru/web/samples/moz_tabs.htm

  20. Владислав

    Более полного и ясного разъяснения не нашёл :)
    Спасибо.
    Пишите больше полезностей!
    Благодарный читатель ;)

  21. kir_pich

    долго мучался как это обьяснить жене но так и не смог!
    а кто может,или мож у каво есть обьяснение того в каких случаях в стилях нужно ставить точку а в каких нет?!!!
    просто самомуто понятно но вот чтобы обьяснить, както не получается:-(((

  22. Франковский Богдан

    По-моему тут отлично и понятно все расписано :/ Точка ставиться для определения стиля элементов с атрибутом "class" - то есть если стиль будет применяется к группе элементов (одного класса).
    Например:

    .frameClass
    {
    border: 1px dotted #999;
    }
    

    а на html-странице есть несколко елементов:

    .... (какой-то код)
    <div class="frameClass" ></div>
    

    Знак "#" ставится для определения стиля конкретного элемента, в независимости от его класса (например если этот элемент имеет дополнительные отличия от присвоенного ему класса)
    Никакой знак не ставится для некоторых элементов, которые могут быть только в одиночном представлении на странице, например для "body".
    Если ошибаюсь, поправьте.
    PS: Иван, Вы не могли бы добавить preview для поста, а то как-то неуютно без него отправлять.

  23. Игорь

    есть в статье:
    .important.centered {border:solid black 1px;}

    Наверное, все таки:

    .important, .centered {border:solid black 1px;}

    ..другое разделение классов.

  24. Иван Сагалаев

    Нет-нет, я имел в виде именно вот так подряд через точку. Это означает применять правила только к элементам, у которых проставлены оба класса. А ".important, .centered" применится к элементам, у которых есть хотя бы один класс.

  25. dark-demon

    к сожалению ие такие вещи не понимает..

  26. JAVA

    Насчет использование id вместо ссылок большое спасибо, уже не один сайт загадил этим самым
    <a>, куча мусора лишнего получается...

  27. Kobzar

    Спасибо вам Иван, за ваш блог - самый лучший источник информации о css на данный момент. И конечно тоже есть вопросы. Прочитал как-то на сайте у Влада Мержевича статью про XHTML и там было сказано, что именно в XHTML применяется именно id том числе и вместо class. Вопрос такой: насколько уместно в обычном HTML использовать только id, ведь действие идентификаторов так же распространяется на все "меченные" элементы?

  28. Иван Сагалаев

    Я, честно говоря, ничего не понял... Что такое "id вместо class" и что такое "действие идентификатора распространяется на все меченые элементы"?

    Но в любом случае, никакой разницы между HTML и XHTML в этом вопрос нет.

  29. Kobzar

    Точно,это я себя в заблуждение ввёл. Перечитал внимательней, разобрался.

  30. bitfroster

    .important.centered {border:solid black 1px;}

    тут стоит заметить, что ИЕ рассматривает этот код как:

    .important, .centered {border:solid black 1px;}
    

    т.е. следует понимать, что в IE это работает?

  31. Express

    Хорошая статья, теперь id буду использовать только для уникальных слоев

  32. gnidskill.livejournal.com

    с :target четкая фишка. Спасибо!

  33. Digi

    А я реально id="about" не знал :) делал по старинке в хтмле :(
    полезненько!

  34. arnoldovich

    Я гдето встречал в CSS такую запись

    DIV#main
    {...}

    Имеет ли такая запись какие-то нюансы?

  35. Иван Сагалаев

    Эта запись означает "элемент div с id main". Что именно подразумевается под нюансами, не понял :-)

  36. arnoldovich

    div#main{...}

    и

    #main{...}
    

    Это одно и тоже, или есть какие-то особенности?

  37. Иван Сагалаев

    Первое правило сработает для <div> с id="main", второе — для любого элемента с id="main". Вообще, очень мало причин ограничивать указание id только для конкретного тега. Поэтому обычно пишут просто #main.

  38. arnoldovich

    очень мало причин ограничивать указание id только для конкретного тега

    Вы могли бы назвать эти причины?

    Ведь id указывается на странице только один раз. Или разным элементам можно указывать один и тот же id? По-моему нет.

  39. Иван Сагалаев

    Причина может появиться, когда один и тот же CSS используется для разных страниц на сайте. Тогда может оказаться, что, например, на страницах одного типа есть таблицы с id="main", а на других — главный блок с id="main". И тогда, чтобы стили для разных по сути вещей не смешивались, будет иметь смысл их разделить. Что не означает, что именно так надо делать. Это просто иллюстрация того, когда это теоретически возможно.

  40. Acden

    Поправлю Богдана в ответ на вопрос от kir_pich:
    точка не ставится для тех элементов, которые зарезервированы в языке html:

    body { }
    p { }
    

    А ставится для тех, которые Вы придумали сами:

    p.orange {color:#00FF00}
    

    Тогда всем абзацам, которым вы присвоете

    <p class="green"> </p>
    

    будет изменятся цвет текста на зелёный.

    Можно записать и проще:

    .orange {color:#00FF00}
    

    тогда этот класс можно будет применить к любому элементу, не только к P.

  41. #!Ros__

    Иван, хотелось бы уточнить сразу такое:

    #idofdiv>A.classofa
    {
     ...
    }
    

    и

    #idofdiv A.classofa
    {
      ...
    }
    

    это одно и тоже или есть различия?
    Спасибо.

  42. Иван Сагалаев

    Первая запись означает ссылки с классом "classofa", являющиеся детьми первого уровня "#idofdiv". Вторая запись — таких же детей, но любого уровня.

  43. Маниакальный веблог » Чем отличаются id и class

  44. Ant Gray

    В последнее время стараюсь не использовать id для стилей, потому что на один тег можно повесить несколько классов, запись id="foo" class="bar" глупо смотрится, class="foo bar" лучше.

  45. Ant Gray

    @Иван Сагалаев,

    «Причина может появиться, когда один и тот же CSS используется для разных страниц на сайте. Тогда может оказаться, что, например, на страницах одного типа есть таблицы с id="main", а на других — главный блок с id="main"»

    Чтобы такого не было, надо блоки именовать #bl_main, а таблицы #table_main.

  46. Malak

    Как первый раз сделал сайт по этим статьям, так и продолжаю почерпывать знания из этого чудо-источника. Спасибо Ивану Сагалаеву за очень доступное и наглядное изложение материала!!

  47. Денис

    Спасибо! Я чайник в вёрстке, она у меня не приоритет (другой профиль), но тут сложный случай попался. Сегодня я понял, что методом тыка буду править шаблон неделю, и пошёл учить матчасть :)

  48. артем

    спасибо, теперь все понятно

  49. Horadric

    Спасибо. Разобрался. Теперь вопрос меня мучить не будет. Интересно только, будет ли ПС штрафовать за множественные одинаковые id на странице

  50. demon_sl

    Спасибо! и за коменты всем спасибо даже вопросов не осталось )

Добавить комментарий