Сколько классов можно указать в атрибуте class в html
Перейти к содержимому

Сколько классов можно указать в атрибуте class в html

  • автор:

Element.className

Свойство className отвечает за значение атрибута class элемента.

Примечание: Кстати, у className есть большой брат. Его зовут element.classList — более мощный и функциональный метод для работы с классами элемента.

Синтаксис

var cName = elem.className; elem.className = cName;
  • cName — строка. Если нужно указать несколько классов, они указываются через пробел.

Пример

var elm = document.querySelector("div"); alert(elm.className); //"booble example" elm.className = "class1 class2 class3"; alert(elm.className); //"class1 class2 class3" 

Примечание: ##### Примечание:Свойство получило необычное название className из-за того, что во многих языках, работающих с DOM, слово class является зарезервированным*.*

Совместимость с браузерами

BCD tables only load in the browser

Спецификация

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Общий HTML атрибут class

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

В основном атрибут class используется для указания на класс в каскадной таблице стилей. Тем не менее, он также может использоваться скриптами JavaScript для манипулирования (посредством HTML DOM) элементами HTML с заданным классом.

В HTML5 атрибут class можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, это не всегда имеет смысл!).

В HTML 4.01 атрибут class нельзя использовать с элементами , , , , , , , .

Синтаксис атрибута
Значения атрибута

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

  • должно начинаться с латинской буквы A-Z или a-z
  • за которой может следовать: латинские буквы (A-Za-z), цифры (0-9), дефис («-«) и символ подчеркивания («_»)
  • в HTML все значения регистронезависимы
Пример использования атрибута

Использование атрибута class в HTML документе:

    h1.intro < color: blue; >p.important 

Заголовок 1

Параграф.

Это очень важный параграф. :)

Атрибут class

Атрибут class используется для работы с Каскадными таблицами стилей и служит для указания классов CSS, к которым будет принадлежать данный HTML-элемент. Причем на одной веб-странице может быть сколько угодно тегов с одинаковым классом.

Атрибут class появился в HTML довольно давно (с появлением CSS) и так же давно поддерживается большинством HTML-тегов. Однако, начиная с версии HTML 5, его разрешено указывать вообще для всех элементов. Поэтому те теги, на страницах которых вы увидите напротив class логотип HTML 5 ( ), начали поддерживать его именно с этой версии HTML. Впрочем, таких тегов очень мало.

Значения

Значением атрибута class является одно или несколько (через пробел) произвольных слов, каждое из которых обозначает один из классов, к которым принадлежит элемент. Эти слова называются именами классов и могут состоять только из символов латинского алфавита (a-z, A-Z), цифр (0-9), символов дефиса (-) и подчеркивания (_). Причем имя класса не может начинаться с цифры или дефиса, за которым следует цифра.

Значение по умолчанию: нет.

Синтаксис

. . 

Обязательный атрибут: нет.

Пример HTML: применение атрибута class

    seodon.ru - атрибут class   

Пример использования классов

Результат: Применение атрибута class.

Применение атрибута class

Поддержка версиями HTML

Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Да Да Да Да

Поддержка браузерами

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Да Да Да Да Да

Классы CSS

В таком случае будут окрашены все теги вне зависимости от их количества на странице. Если нужно задать свойство только для ограниченного количества элементов, то лучше использовать класс в качестве селектора.

Класс указывается для каждого тега самостоятельно так же, как и атрибуты. К примеру, придумаем класс под названием «test»:

В CSS коде селектор по классу будет иметь точку перед названием класса «.test»

.test

Рекомендуем использовать в названиях класса только латинские символы, цифры, тире и подчёркивание

У каждого тега может быть несколько классов. Можно использовать их в качестве CSS селекторов как по отдельности, так и одновременно. Рассмотрим пример

Тише, мыши. Кот на крыше.

Применим к этим тегам следующие свойства:

.test1 < color: red; >.test2

Результат будет таким:

Тише, мыши. Кот на крыше.

На втором предложении значение свойства color от класса test1 будет перезаписано из-за класса test2.

Теперь рассмотрим способы использования нескольких классов одновременно в качестве селектора. Если использовать предыдущий пример, то для прямого обращение ко второму тегу необходимо использовать селектор «.test1.test2»

.test1.test2

Обратите внимание, что между названиями классов в селекторе нет пробела. И в селекторе может быть любое количество классов. К примеру: «.test1.test2.test3.test4» будет соответствовать тэгу с таким набором классов:

Пробел между названиями классов в селекторе ставится, только если надо обратиться к вложенному элементу. К примеру, если есть html код:

 Тише, мыши. Кот на крыше. 

То для обращения ко второму вложенному тегу надо поставить пробел внутри селектора между названиями классов, чтобы получилось так:

.test1 .test2

Таким образом можно обращаться к элементам любого уровня вложенности и с любым количеством тегов. К примеру, «.test1 .test2 .test3.test4 .test5» будет соответствовать вложенному тэгу с таким набором классов:

   Сыр    

В таком случае CSS селектор будет выглядеть так:

.test1 .test2 .test3.test4 .test5

А результат на странице браузера будет выглядеть так:

Сыр

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *