Класс - CSS-хитрости | CSS Альманах 2024

Селектор класса в CSS начинается с точки (.), Например:

.class ( )

Селектор класса выбирает все элементы с соответствующим атрибутом класса.

Например, этот элемент:

Push Me

выбран и оформлен следующим образом:

.big-button ( font-size: 60px; )

Вы можете дать классу любое имя, которое начинается с буквы, дефиса (-) или подчеркивания (_). В именах классов можно использовать числа, но число не может быть первым или вторым символом после дефиса. Если только вы не сойдете с ума и не начнете избегать селекторов, что может показаться странным:

.\3A \`\( ( /* matches elements with class=":`(" */ )

У элемента может быть более одного класса:


 This paragraph will get styles from .intro and .blue selectors.

Элемент с несколькими классами оформлен в соответствии с правилами CSS для каждого класса. Вы также можете комбинировать несколько классов для выбора элементов:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Эта демонстрация показывает, чем селекторы одного класса отличаются от комбинированных селекторов:

Вы также можете ограничить селектор класса определенным типом элемента, который иногда называют «квалификацией тега»:

ul.menu ( list-style: none; )

Специфика

Сам по себе селектор класса имеет значение специфичности 0, 0, 1, 0. Это «более мощный», чем селектор элемента (например:), a ( )но менее мощный, чем селектор ID (например #header ( )). Специфичность увеличивается, когда вы комбинируете селекторы классов или ограничиваете селектор конкретным элементом.

Доступ к классам с помощью JavaScript

Вы можете читать классы элемента и управлять ими с помощью classListJavaScript. Например, добавление класса может выглядеть так:

document.getElementById('italicize').classList.add('italic');

В этой демонстрации показаны основные примеры classListиспользования:

JQuery также имеет методы для взаимодействия с классами, в том числе .addClass(), .removeClass(), .toggleClass(), и .hasClass().

Дополнительная информация

Прочтите спецификацию W3C для селекторов классов.
Узнайте больше о семантических именах классов.
Узнайте больше о специфике.
Узнайте о разнице между классами и идентификаторами.
Узнайте о нескольких селекторах классов и комбинациях селекторов класса / идентификатора.
Узнайте об API .classList.
Узнайте о манипуляциях с классами в jQuery.