Как задать два класса одному элементу

Как добавить в html-элемент несколько классов?

Чтобы добавить в html-элемент несколько классов, можно воспользоваться методом classList.add() у элемента. Этот метод может принимать любое количество параметров. Каждый из этих параметров должен быть строкой — это имя класса, которое нужно добавить:

Также можно добавлять классы отдельными вызовами метода:

Имена классов должны соответствовать правилам именования, то есть, например, не должны содержать пробельные символы. Такой код выдаст ошибку:

Используем два класса

Общее оформление для всех преимуществ готово, теперь надо «раскидать» их по тарифам.

Вспомните, как мы отделили элементы-преимущества от обычных элементов. Мы добавили им класс, который говорит, что перед нами преимущество ( advantages-item ). Можем ли мы некоторым преимуществам добавить ещё один класс, который привяжет их к какому-то тарифу и отделит их от других преимуществ? Можем, и тогда у одного элемента будет сразу два класса.

На самом деле у HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class через пробел, например:

Использование нескольких классов — это типовой приём, который ещё называется миксованием классов. Обычно его используют так: в один класс выносят общее оформление, а в дополнительных классах описывают его модификации. В примере выше размеры карточек товаров можно описать в CSS-правиле .product , а особый фон для хита продаж — в правиле .hit . В общем, удобный приём, помогает сократить дублирование кода.

Осталось придумать наши классы для тарифов. Для эконом-тарифа дополнительный класс вводить не будем, для стандартного тарифа используем класс standard , а для вип-тарифа — vip . Всё, можно дорабатывать разметку.

• index.html Сплит-режим
• style.css Сплит-режим

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

В списке advantages-list добавьте:

1. второй класс standard второму элементу (в атрибуте class классы перечисляются через пробел)
2. второй класс standard третьему элементу,
3. второй класс vip четвёртом элементу,
4. второй класс vip пятому элементу.

Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.

HTML атрибут class

HTML атрибут class используется для определения класса для HTML элемента.

Несколько элементов HTML могут совместно использовать один и тот же класс.

Использование атрибута class

Атрибут class часто используется для указания на название класса в таблице стилей. Он также может использоваться JavaScript для доступа и управления элементами с указанным именем класса.

В следующем примере мы имеем три элемента <div> с атрибутом class со значением "city". Все три элемента <div> будут одинаково стилизованные в соответствии с определением стиля .city в разделе head:

Пример

В следующем примере мы имеем два элемента <span> с атрибутом class со значением "note". Оба элемента <span> будут одинаково стилизованы в соответствие определению .note в разделе head:

Пример

Совет: Атрибут class может быть использован на любом HTML элементе.

Примечание: Название класса чуствительно к регистру!

Совет: Вы можете узнать намного больше про CSS в CSS Учебнике на нашем сайте W3Schools.

Синтаксис для класса

Создайте класс; напишите символ точки (.), а потом название класса. Потом определите свойства CSS в фигурных скобках <>:

Пример

Создайте класс с именем «city»:

<h2 > <p>Лондон — це столиця Англії.</p>

<h2 > <p>Париж — це столиця Франції.</p>

<h2 > <p>Токіо — це столиця Японії.</p>

Несколько классов

Элементы HTML могут принадлежать более чем одному классу.

Чтобы определить несколько классов, отделите названия классов пробелом, например <div main">. Элемент будет стилизован в соответствии со всеми указанными классами.

В следующем примере первый элемент <h2> принадлежит как классу city так и классу main и получает стили CSS с обеих классов:

Пример

Различные элементы могут разделять один и тот же класс

Различные элементы HTML могут указывать на одно и то же название класса.

В следующем примере как <h2> так и <p> указывает на "city" класс и будет разделять одинаковый стиль:

Пример

Использование атрибута class в JavaScript

Имя класса также может использоваться JavaScript для выполнения определенных задач для определенных элементов.

JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName() :

Пример

Кликните на кнопку, чтобы скрыть все элементы с названием класса "city":

Не волнуйтесь, если вы не понимаете код в приведенном выше примере.

Вы узнаете больше о JavaScript в разделе HTML JavaScript или вы можете изучить JavaScript Учебник на нашем сайте W3Schools.

Резюме

• HTML атрибут class определяет одно или несколько имен классов для элемента
• Классы используются CSS и JavaScript для выбора и доступа к определенным элементам
• Атрибут class может применяться к любому элементу HTML
• Имя класса чувствительно к регистру
• Различные элементы HTML могут указывать на одно и то же название класса
• JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName()

HTML Упражнения

Вопросы для самоконтроля

• Для чего необходим HTML-атрибут class ?
• Сколько HTML-элементов могут совместно использовать один и тот же класс?
• Имеет ли значение регистр для написания названия класса?
• С помощью какого символа указывается название класса в CSS?
• Могут ли HTML-элементы принадлежать больше чем одному классу?
• Может ли JavaScript использовать имена классов?

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

98. Несколько классов

В предыдущем уроке мы для каждого элемента применяли не более одного класса. В CSS можно применять несколько классов к одному элементу, для этого имена классов нужно разделять пробелом, например, как в примере 1.

Почему удобно применять несколько классов к одному элементу? Рассмотрим HTML код 2 примера.

И CSS код для примера 2.

Во-первых, порядок перечисления имен классов не имеет значения. Во-вторых, мы можем писать любое количество классов для элемента.

Вернемся к примерам 2 и 3. Запустив данный код, вы увидите, что первый абзац красного цвета и у него полужирное начертание, второй абзац только с полужирным начертанием, а третий, просто красный. То есть в первом абзаце, где мы написали два класса: bold и color_red , мы комбинировали красный цвет и полужирное начертание.