Один из самых частых вопросов в процессе знакомства с новыми стандартами -- в чем разница между атрибутами HTML-элементов "id" и "class". Ведь эффект, вроде бы, одинаковый.
Одинаковый эффект у них только в самых простых случаях использования в CSS. На самом деле отличий полно.
id="title".class="decor", а картинкам, которые важны для понимания текста -- class="content".Из этой сути прямо или косвенно вытекают остальные отличия, которые видны и в HTML, и в CSS, и в скриптах.
<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 есть "вес", по которому определяется порядок их применений. У id этот вес больше. Поэтому если у элемента задан и id, и class:
<h2 id="about" class="important">...</h2>
... то из двух правил
#about {color:green;}
.important {color:red;}
... выиграет первое, цвет заголовка будет зеленым. (Веса правил -- это отдельная песня, о ней будет статья в свое время.)
document.getElementById(). Для классов такой функции нет.Эта статья - часть находящегося в процессе написания цикла под рабочим названием "Учебник". Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории "Учебник", где они сейчас собраны в обратном хронологическом порядке.
Комментарии: 31
Denya
22.01.06 17:45
Всю жизнь меня этот вопрос мучал.
Спасибо! :)
Просто и понятно написано.
Krivetsky
22.01.06 20:41
Спасибо. Теперь чуток понятней стало в чем разница.
Elf
22.01.06 22:31
Двойные классы (в смысле, через пробелы) активно использую. Например, общий класс button и подклассы - bt_add, bt_del, bt_edit... Удобно.
Tomaz
23.01.06 11:30
Господа, советую прочитать спецификацию CSS2 (есть и на русском). Она небольшая: вдумчивое чтение займет не так много времени - несколько дней. К тому же, в ней много хороших примеров. Написано, конечно, сухим языком, но к нему быстро привыкаешь. Зато многое сразу станет понятнее.
Sega
23.01.06 23:01
Можно было и побольше написать, хотя это тоже хорошо, хоть какая-то ясность внесена.
Tomaz кинь такую ссылку
Tomaz
24.01.06 11:14
to Sega:
Каскадные таблицы стилей второго уровня. Спецификация CSS2
Как искать информацию в Интернете
wj
26.01.06 17:07
Не очень понятена востребованность конструкции, показанной в примере с якорными ссылками . Насколько часто используется такой прием?
Иван Сагалаев
26.01.06 17:25
Очень часто. В общем-то, ссылки внутрь страницы лучше именно через id и делать. Это проще выглядит, проще пишется, не требует лишнего пустого элемента
<a>и поддерживается всеми браузерами.Кстати, есть еще в CSS3 интересный псевдокласс для оформления блоков, на которые ссылается якорь. Есть, например HTML:
и CSS:
И тогда, при ссылке на страницу
http://site/path/#aboutсоответствующий заголовок будет красным. Или можно какую-нибудь стрелочку нарисовать ему через background-image... Но это уж детали.Знаю, что работает это по крайней мере в Gecko-браузерах, про Оперу и Сафари не знаю...
Давид Мзареулян
26.01.06 18:14
Я бы сказал, что id следует использовать только если данный элемент будет как-то адресоваться — либо через getElementById, либо через ссылку, либо через <label for="…">. Всё. Ни для чего больше id лучше не использовать, потому что следить за уникальностью довольно сложно.
Для всех CSS-ных фокусов лучше использовать классы, тем более, что у одного элемента их может быть и несколько.
Иван Сагалаев
26.01.06 18:23
Я не предлагаю использовать id для "CSS'ных фокусов"... Я описал дополнительную возможность, как CSS'ом можно оформить текущий адресованный элемент, что, конечно, не является единственным великим смыслом адресации.
И классы тут слегка ни при чем, потому что ими реализовать аналог :target не получится.
Dron
27.01.06 01:26
Читаю вашу статью и у меня назрел вопрос следующего плана... Допустим есть таблица: 3 колонки и 100 сстрок. а нужно обратиться к средней колонке посредством document.getElementById() например для скрытия, либо отображения вышеупомянутой... Придется чтоли каждой присваивать уникальный id? (например это прайс и количество строк в таблице может варьироваться до нескольких тысяч). Как в таком случае лучше поступить.
Иван Сагалаев
27.01.06 01:38
Ответил в форуме: http://softwaremaniacs.org/forum/viewtopic.php?id=45
Давид Мзареулян
28.01.06 15:09
Слово «фокусы» я вовсе не в пренебрежительном смысле употребил. А :target — конечно, это же тоже вид адресации.
.grin!
30.01.06 15:10
конкретно каскад ("вес") в очень понятном виде.
http://experiment.net.ru/css2/?f=cascade.html#cascade
остальную спецификацию найти, думаю не сложно =)))
Linoch-ka
13.02.06 14:03
Как правило id приходится оставлять программистам :) и пользоваться только классами. На мой взгляд использовать id во многих случаях удобнее.
Стасюк
25.04.06 16:39
только об этом подумал. Я только не понял, если у меня несколько элементов с id то что? Вот у меня 3 таблицы. В двух должен быть id в одной нет. Так нельзя делать?
Иван Сагалаев
25.04.06 17:42
Два (и больше) элемента с одинаковыми id -- это нонсенс. Id нужен для того, чтобы точно поименовать один конкретный элемент, чтобы потом к нему обращаться.
Вообще, сама постановка вопроса "лучше пользоваться классами" или "мне нужны два id" неверна. Нужны и те, и другие, это средства достижения разных целей, а не сами цели.
В любом случае, с конкретными вопросами -- прошу в форум :-)
ELV1S
15.07.06 11:35
Спасибо за столь понятное разъяснение вопроса.
dark-demon
21.02.07 01:43
.important.centered {border:solid black 1px;}
тут стоит заметить, что ИЕ рассматривает этот код как:
ну и пример от меня: http://dark-demon.nm.ru/web/samples/moz_tabs.htm
Владислав
7.05.07 02:58
Более полного и ясного разъяснения не нашёл :)
Спасибо.
Пишите больше полезностей!
Благодарный читатель ;)
kir_pich
27.05.07 23:03
долго мучался как это обьяснить жене но так и не смог!
а кто может,или мож у каво есть обьяснение того в каких случаях в стилях нужно ставить точку а в каких нет?!!!
просто самомуто понятно но вот чтобы обьяснить, както не получается:-(((
Франковский Богдан
27.05.07 23:46
По-моему тут отлично и понятно все расписано :/ Точка ставиться для определения стиля элементов с атрибутом "class" - то есть если стиль будет применяется к группе элементов (одного класса).
Например:
а на html-странице есть несколко елементов:
Знак "#" ставится для определения стиля конкретного элемента, в независимости от его класса (например если этот элемент имеет дополнительные отличия от присвоенного ему класса)
Никакой знак не ставится для некоторых элементов, которые могут быть только в одиночном представлении на странице, например для "body".
Если ошибаюсь, поправьте.
PS: Иван, Вы не могли бы добавить preview для поста, а то как-то неуютно без него отправлять.
Игорь
17.07.07 15:34
Наверное, все таки:
.important, .centered {border:solid black 1px;}
..другое разделение классов.
Иван Сагалаев
17.07.07 15:39
Нет-нет, я имел в виде именно вот так подряд через точку. Это означает применять правила только к элементам, у которых проставлены оба класса. А ".important, .centered" применится к элементам, у которых есть хотя бы один класс.
dark-demon
17.07.07 23:15
к сожалению ие такие вещи не понимает..
JAVA
16.08.07 05:33
Насчет использование id вместо ссылок большое спасибо, уже не один сайт загадил этим самым
<a>, куча мусора лишнего получается...Kobzar
2.05.08 18:54
Спасибо вам Иван, за ваш блог - самый лучший источник информации о css на данный момент. И конечно тоже есть вопросы. Прочитал как-то на сайте у Влада Мержевича статью про XHTML и там было сказано, что именно в XHTML применяется именно id том числе и вместо class. Вопрос такой: насколько уместно в обычном HTML использовать только id, ведь действие идентификаторов так же распространяется на все "меченные" элементы?
Иван Сагалаев
3.05.08 12:20
Я, честно говоря, ничего не понял... Что такое "id вместо class" и что такое "действие идентификатора распространяется на все меченые элементы"?
Но в любом случае, никакой разницы между HTML и XHTML в этом вопрос нет.
Kobzar
4.05.08 19:22
Точно,это я себя в заблуждение ввёл. Перечитал внимательней, разобрался.
bitfroster
23.05.08 14:11
.important.centered {border:solid black 1px;}
тут стоит заметить, что ИЕ рассматривает этот код как:
т.е. следует понимать, что в IE это работает?
Express
17.07.08 22:02
Хорошая статья, теперь id буду использовать только для уникальных слоев