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.
How to apply two CSS classes to a single element [duplicate]
Can I apply 2 classes to a single div or span or any HTML element? For example:
I tried and in my case c2 does not get applied. How can I apply both classes at once?
8 Answers 8
1) Use multiple classes inside the class attribute, separated by whitespace (ref):
2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):
Include both class strings in a single class attribute value, with a space in between.
As others have pointed out, you simply delimit them with a space.
However, knowing how the selectors work is also useful.
Consider this piece of HTML.
Using .a < . >as a selector will select the first and third. However, if you want to select one which has both a and b , you can use the selector .a.b < . >. Note that this won’t work in IE6, it will simply select .b (the last one).
This is very clear that to add two classes in single div, first you have to generate the classes and then combine them. This process is used to make changes and reduce the no. of classes. Those who make the website from scratch mostly used this type of methods. they make two classes first class is for color and second class is for setting width, height, font-style, etc. When we combine both the classes then the first class and second class both are in effect.
Применение мультиклассов в CSS
9433
Введение в мультиклассы.
В данной статье мы познакомимся с так называемыми сложными селекторами, особенностями их применения. Для более простого восприятия материала рекомендуем просмотреть пятый видео урок из курса HTML & CSS.
Для начала вспомним, что таблицы стилей собираются из наборов правил, которые содержат один или несколько селекторов и конечно же содержат блок определений. Блок определений ограничен фигурными скобками и содержит в себе перечень свойств и выбранных для них значений.
Селектором может быть любой элемент или HTML-тег, для которого возможно задание неких правил форматирования. Принцип определения селекторов довольно простой и имеет следующий синтаксис: Name < Style _ rules >.
Здесь Name – это имя любого элемента на вашей странице, а Style_rules – описание правил стиля, которые вы собираетесь применить к элементу.
Отдельно обратим ваше внимание на универсальный селектор, который используют, когда требуется установить стиль абсолютно для всех элементов, присутствующих в веб-документе. Он имеет следующий синтаксис:
< title > CSS title >
/*Используем универсальный селектор, который обозначается "*" */