Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

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-коде ниже остальных.

При выборе имени класса необходимо учитывать следующие правила:

Примечание: если одинаковые значения атрибута class прописаны к нескольким разным HTML-элементам, но только к одной группе из них нужно применить дополнительный стиль, то перед именем класса нужно написать селектор типа, который будет информировать к каким элементам применять заданный стиль:
span.alert { font-weight: bold; }
В этом случае только текст в элементах <span> со значение alert атрибута class будет выделен жирным шрифтом, остальные элементы с данным классом будут игнорировать этот стиль.

Пример

.myClass { font-weight: bold; }
<p class="myClass">Всё предложение будет написано
жирным шрифтом.</p>

<p>Только <span class="myClass">эта часть предложения</span> 
будет выделена жирным шрифтом.</p>

Результат

Всё предложение будет написано жирным шрифтом.

Только эта часть предложения будет выделена жирным шрифтом.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2025 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru