CSS селектор класса
Селектор класса применяет CSS-стили ко всем HTML-элементам, у которых есть атрибут class
с соответствующим значением. Значением для селектора класса может выступать любое произвольное название. В CSS-коде для обращения к классу перед его именем ставится точка:
.myClass { color: red; }
Точка перед именем класса отличает селектор класса от других селекторов и помогает отделить селектор класса от всего, с чем он может быть объединён (например, от селектора типа):
p.myClass { color: red; }
span.myClass { color: red; }
Атрибут class
может содержать несколько имён классов, разделённых пробелами. Порядок следования имён в значении атрибута значения не имеет:
<p class="myClass1 myClass2 myClass3">текст</p>
<!-- или -->
<p class="myClass3 myClass1 myClass2">текст</p>
При указании нескольких классов для одного элемента, следует учитывать, что они могут содержать одинаковые свойства, но с разными значениями, в этом случае для элемента будет установлено значение свойства того класса, который описан в CSS-коде ниже остальных.
При выборе имени класса необходимо учитывать следующие правила:
- в имени класса разрешается использовать следующие символы: буквы алфавита, числа, дефисы и знаки подчёркивания;
- имя класса всегда должно начинаться с буквы алфавита;
- имена классов чувствительны к регистру символов, например: .Menu и .menu это имена двух разных классов.
class
прописаны к нескольким разным HTML-элементам, но только к одной группе из них нужно применить дополнительный стиль, то перед именем класса нужно написать селектор типа, который будет информировать к каким элементам применять заданный стиль:
span.alert { font-weight: bold; }
В этом случае только текст в элементах <span>
со значение alert
атрибута class
будет выделен жирным шрифтом, остальные элементы с данным классом будут игнорировать этот стиль.
Пример
.myClass { font-weight: bold; }
<p class="myClass">Всё предложение будет написано
жирным шрифтом.</p>
<p>Только <span class="myClass">эта часть предложения</span>
будет выделена жирным шрифтом.</p>
Результат
Всё предложение будет написано жирным шрифтом.
Только эта часть предложения будет выделена жирным шрифтом.