CSS селектор класс
Поддержка браузерами
Описание
CSS селектор класс (class) применяет стиль ко всем элементам с указанным классом. Он определяется при помощи произвольного имени, перед которым ставится точка:
.myClass { color: blue; }
После того, как вы определили в таблице стилей селектор класса, вы можете с помощью атрибута class указать имя класса у тех элементов, к которым нужно применить данный стиль. Ставить точку перед именем класса в значении атрибута не нужно:
<p class="myClass">Текст абзаца.</p>
В атрибуте class в качестве значения может быть указан не один, а несколько классов, в этом случае имена классов должны быть разделены пробелами, порядок следования имён классов не имеет значения.
<p class="className1 className2 className3">Текст абзаца.</p>
При указании нескольких классов, следует учитывать тот факт, что они могут содержать одинаковые свойства, но с разными значениями, в этом случае для элемента будет установлено значение свойства того класса, который описан в CSS-коде ниже остальных.
При выборе имени класса необходимо учитывать следующие правила:
- Все имена классов должны начинаться с точки. С её помощью браузеры находят селекторы классов в таблице стилей
- В имени класса разрешается использовать следующие символы: буквы алфавита, числа, дефисы и знаки подчёркивания
- Имя класса после точки всегда должно начинаться с буквы алфавита
- Имена классов чувствительны к регистру символов, например: .Menu и .menu это имена двух разных классов
span.alert { font-weight: bold; }в этом случае только текст в элементах span со значение alert атрибута class будет выделен жирным шрифтом, остальные элементы с данным классом будут игнорировать этот стиль.
Пример:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style> .myclass { color: blue; } </style> </head> <body> <h1> Добро пожаловать! </h1> <p class="myclass"> Меня зовут Арни. </p> <p class="myclass"> Я играю в онлайн игры. </p> <p> Моего кота тоже зовут Арни. </p> </body> </html>
Результат данного примера:
Добро пожаловать!
Меня зовут Арни.
Я играю в онлайн игры.
Моего кота тоже зовут Арни.