Css id або class, відмінності id від class

Id - це унікальний ідентифікатор елемента. На одній сторінці один ідентифікатор застосовується тільки один раз, хоча можна застосовувати і кілька однакових ідентифікаторів в межах однієї сторінки, але це може викликати проблеми при використанні HTML-якорів і JS. Якщо спробувати привласнити одному елементу (HTML-тегу) два різних ID, то спрацює тільки правила з першого (самого лівого) ID

Приклад 1: як не бажано використовувати ідентифікатори (ID)

Блок виділеного тексту

Приклад 2: як можна використовувати ідентифікатори (ID)

Присвоєння двох або більше id 1-му елементу не допускається

У разі одночасного застосування до одного елементу id і class, пріоритет у ID буде вище, ніж у class:

Визначення стилів CSS

# my_id_r7t # 123; color. green; font-weight. bold; # 125;
.my_class_r7t # 123; color. blue; font-style. italic; # 125;

HTML з використанням стилів CSS

Цьому абзацу присвоєно клас my_class і ідентифікатор my_id.

Як видно, колір придбав значення, записані в ідентифікатор. Але якщо придивитися уважніше, то id і class можуть з успіхом доповнювати один одного: жирний шрифт, заданий в ідентифікатор поєднується з курсивним шрифтом, записаним в class.

Якщо ж дописати дескриптору

ще й стиль:

. то результат буде таким:

Найвищим пріоритетом має стиль, присвоєний дискриптор за допомогою style = ".".

Хороший приклад пріоритетів, наведено в офіційній документації по CSS (eng). У кратце, пріоритети в порядку убування такі: style, id, class, стиль тега.

Елемент id може бути застосований в якості HTML-якоря, замість давнішої конструкції . для того, щоб можна було послатися на певну частину сторінки, без її перезавантаження з попомщью наверх . Якщо на сторінці виявиться кілька ідентичних id, виникне неоднозначна ситуація.

При програмуванні сторінок за допомогою JS, найчастіше використовується функція getElementById # 40; # 41 ;. яка також "розраховує" на те, що ідентифікатор повинен бути унікальним. В іншому випадку можуть виникнути помилки в коді.

При використанні class. одному HTML-дескриптору можна призначити стилі з декількох класів одночасно:

my_class_r7t # 123; color. blue; font-style. italic; # 125;
.my_class_ffR5 # 123; color. black; background-color. #fafafa; padding. 3px; border. 1px solid # 757575; margin-left. 30px; # 125;

Імена різних класів записуються через пробіл:

Приклад застосування 2-ух різних класів для 1-го HTML-тега.

Як це виглядає, дивіться нижче:

Результат застосування двох різних класів для 1-го дескриптора HTML.

Класи my_class_r7t і my_class_ffR5 встановлюють різні кольори вмісту HTML-тега. Використаний буде той колір, який визначений в файлі стилів пізніше (в даному випадку class my_class_ffR5 записаний після my_class_r7t). Порядок застосування класів в самому HTML-дескрипторі значення не має.

Щоб призначити складовим класів унікальне стильове оформлення, вони записуються разом, без проблеем:

my_class_bbbb755 # 123; font-weight. bold; # 125;
.my_class_ffR5 .my_class_bbbb755 # 123; text-align. right; # 125;

Вирівнювання по правому краю, буде застосовано тільки в разі, коли одному HTML-дескриптору присвоєно відразу 2 класу:

Приклад застосування стилів для складових класів

Як це виглядає, дивіться нижче:

Приклад застосування стилів для складових класів

Один і той же class, в відрізняє від id, можна без проблем привласнювати не обмеженому кількістю різних елементів:

.

.

.

Class або id - що використовувати?

Насправді, не можна вибирати, що використовувати: class або id. Це на подобі, як вибирати, що краще: їсти чи пити? Користуватися необхідно і класами і ідентифікаторами, в залежності від поставленої мети. У більшості випадків краще використовувати class, щоб ненавмисно не використовувати id на одній сторінці більше одного разу. Але там де необхідно, потрібно застосовувати id: виділення унікального блоку сторінки, для якорів, для JS та ін.

Корисні посилання: