Css селектори id і class

На додаток до селектора типу. в CSS є можливість вибору конкретного елемента, не залежно від його типу. Для цього можна використовувати або селектор ідентифікатора, або селектор класу.

селектор id

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

Для використання селектора id, потрібно створити ідентифікатор (id), придумавши йому унікальну назву, і прописати його в атрибуті id елемента, до якого буде застосовуватися стиль. В описі стилю селектор id починається з символу # відразу після якого йде назва ідентифікатора.

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

Приклад роботи селектора id:

Примітка: не давайте ідентифікаторів імена, що починаються з цифр, вони не будуть працювати в браузері Mozilla Firefox.

селектор class

Селектор клас дозволяє також як і селектор id стилізувати конкретний елемент сторінки, але на відміну від id, селектор class дозволяє застосувати свій стиль до кількох елементів на веб-сторінці, а не тільки до одного.

Для використання селектора class, потрібно вказати, до якого елементу на сторінці ви хочете його застосувати, для цього треба всього лише додати атрибут class до HTML-тегу, який потрібно стилізувати, і вказати в якості значення потрібне ім'я класу з описаним стилем.

Правила для імен класів:

• всі назви селекторів класів повинні починатися з точки, з її допомогою браузери знаходять селектор класу в таблиці стилів CSS
• в імені класу дозволяється використовувати тільки букви, числа, дефіс і знак підкреслення
• ім'я класу після точки завжди повинно починатися з літери
• імена класів чутливі до регістру, наприклад .Menu і .menu будуть розглядатися в CSS, як два різних класи

Якщо вам потрібно, щоб стиль застосовувався тільки до певних тегам на сторінці, то в селекторі перед ім'ям класу потрібно вказати елемент, до якого і буде застосований стиль:

Як ви вже помітили з прикладу, писати точку перед ім'ям класу в html-коді (в значенні атрибута class) не потрібно. Вона потрібна тільки в назві селектора в таблиці стилів.

З цією темою дивляться: