Как выбрать элемент с определенным классом в CSS с помощью ".classname"

Выбор элементов с определенным классом в CSS осуществляется с помощью точки, за которой следует имя класса. Такой подход известен как селектор класса.

Синтаксис:

.classname {
    // CSS свойства
}

Это означает, что любому HTML элементу, которому присвоен указанный класс, будут применяться свойства CSS, описанные в этом блоке.

Пример

Возьмем к примеру HTML код:

<p class="classname">Этот параграф имеет класс "classname".</p>
<p>Этот параграф класса не имеет.</p>

Теперь, допустим, мы хотим изменить цвет текста только для параграфов с классом "classname". В CSS это будет выглядеть так:

.classname {
    color: red;
}

Результатом будет то, что только текст в параграфе с классом "classname" будет красным.

Дополнительные замечания

Напомним, что элемент HTML может иметь несколько классов, разделенных пробелами. В таком случае, каждый класс указывается в CSS через точку.
У разных элементов может быть один и тот же класс. Это позволяет применять одинаковые стили к разным элементам.
Селектор класса в CSS не чувствителен к регистру.
Важно помнить, что селекторы класса в CSS имеют ниже приоритет, чем селекторы ID. Если у элемента есть и ID, и класс, то применяются свойства от ID. Если необходимо изменить эту логику, можно использовать "!important" в конце свойства CSS в блоке класса.

Используя точку для выбора классов в CSS, вы сможете эффективно стилизовать элементы на веб-странице.

Как выбрать элемент с определенным классом в CSS с помощью ".classname"

Пример

Дополнительные замечания

Related Questions