Чим відрізняються id і class

17.01.06
Автор статті, Іван Сагалаєв попереджає, що даний матеріал надає собою поточні замітки по темі, а не закінчену роботу.
Ваші коментарі і доповнення до статті вітаються в авторському блозі Маніакальний Веблог

Один з найбільш частих питань у процесі знайомства з новими стандартами – в чому різниця між атрибутами 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(). Для класів такої функції немає.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*