CSS селектор клас (class) застосовує стиль до всіх елементів із зазначеним класом. Він визначається за допомогою довільного імені, перед яким ставиться крапка:
Після того, як ви визначили в таблиці стилів селектор класу, ви можете за допомогою атрибута class вказати ім'я класу у тих елементів, до яких потрібно застосувати даний стиль. Ставити крапку перед іменем класу в значенні атрибута не потрібно:
В атрибуті class як значення може бути зазначений не один, а кілька класів, в цьому випадку імена класів повинні бути розділені пробілами, порядок проходження імен класів не має значення.
При вказівці декількох класів, слід враховувати той факт, що вони можуть містити однакові властивості, але з різними значеннями, в цьому випадку для елемента буде встановлено значення властивості того класу, який описаний в CSS-коді нижче інших.
При виборі імені класу необхідно враховувати наступні правила:
- Всі імена класів повинні починатися з точки. З її допомогою браузери знаходять селектори класів в таблиці стилів
- В імені класу дозволяється використовувати такі символи: літери алфавіту, числа, дефіси та знаки підкреслення
- Ім'я класу після точки завжди повинно починатися з літери алфавіту
- Імена класів чутливі до регістру символів, наприклад. Menu і .menu це імена двох різних класів
Примітка: якщо однакові значення атрибута class прописані до кількох різних елементів, але тільки до однієї групи з них потрібно застосувати додатковий стиль, то перед ім'ям класу потрібно написати додатковий селектор, який буде інформувати до яких елементів застосовувати заданий стиль: в цьому випадку тільки текст в елементах span зі значення alert атрибута class буде виділено жирним шрифтом, інші елементи з даним класом будуть ігнорувати цей стиль.
Результат даного прикладу:
Ласкаво просимо!
Мене звуть Арні.
Я граю в онлайн ігри.
Мого кота теж звуть Арні.