Атрибут class
Атрибут class задает один или несколько классов для элемента (под элементом имеется ввиду тег).
Это делается для того, чтобы затем обратиться через CSS к группе элементов, у которых задан одинаковый класс, и применить для него определенные свойства (к примеру, сменить цвет текста, размер шрифта и так далее).
Существует также атрибут id, который подобно атрибуту class позволяет выбирать элементы на HTML странице.
Разница между атрибутом class и атрибутом id в том, что class выбирает группу элементов (даже если он дан одному элементу — его в последствии можно дать и другому), а id выбирает уникальный элемент (больше элемента с таким id не должно быть на странице сайта, иначе будет конфликт).
Как понять, что давать элементу — класс или id? Класс дается тем элементам, которые повторяются на страницах сайта (чтобы по несколько раз не писать один и тот же CSS код). Даже если у вас сейчас данный элемент один, но вы чувствуете, что похожие элементы могут появится в дальнейшем — давайте этому элементу класс. Если же вы уверены, что такой элемент уникальный — то давайте ему id. Хотя в настоящее время есть тенденция к тому, чтобы всем элементам давать класс, а id оставить для JavaScript, но она не является общепринятой.
Элементу можно задать несколько классов, в этом случае их следует перечислять через пробел.
Названия классов должны быть набраны английскими буквами, цифрами, без пробелов (пробел отделяет классы друг от друга, вместо него можно использовать подчеркивание или дефис). Классы не должны начинаться с цифры (в HTML5 уже можно, но не будет работать в старых браузерах).
Имена классам следует давать на английском языке (а не на русском, просто английскими буквами!). Имена должны быть осмысленными, отражать суть класса.
Пример
Давайте всем абзацам с классом test зададим красный цвет текста:
Пример . Несколько классов для элемента
А здесь давайте первому абзацу зададим несколько классов — test1 и test2 (запишем их через пробел). Класс test1 задает красный цвет тексту, а класс test2 задает размер шрифта в 20px . Второму абзацу дан только класс test1 (этот абзац станет красным), а третьему абзацу — класс test2 (этот абзац будет иметь размер шрифта в 20px). Первый абзац, у которого два класса, будет иметь одновременно и красный цвет и размер шрифта в 20px :
98. Несколько классов
В предыдущем уроке мы для каждого элемента применяли не более одного класса. В CSS можно применять несколько классов к одному элементу, для этого имена классов нужно разделять пробелом, например, как в примере 1.
Почему удобно применять несколько классов к одному элементу? Рассмотрим HTML код 2 примера.
И CSS код для примера 2.
Во-первых, порядок перечисления имен классов не имеет значения. Во-вторых, мы можем писать любое количество классов для элемента.
Вернемся к примерам 2 и 3. Запустив данный код, вы увидите, что первый абзац красного цвета и у него полужирное начертание, второй абзац только с полужирным начертанием, а третий, просто красный. То есть в первом абзаце, где мы написали два класса: bold и color_red , мы комбинировали красный цвет и полужирное начертание.
Как применить два класса CSS к одному div / span
могу ли я применить 2 класса к одному div или span или любому html-элементу? Например:
Я пробовал и в моем случае c2 не применяется. Как я могу применить оба класса сразу?
7 ответов:
1) Используйте несколько классов внутри атрибута class, разделенных пробелами ( ref):
2) для назначения элементов, содержащих все указанные классы, используйте этот селектор CSS (нет пространства) ( ref):
включить обе строки класса в одно значение атрибута класса, с пробелом между ними.
как указывали другие, вы просто ограничиваете их пробелом.
однако, зная, как работают селекторы также полезно.
рассмотрим этот фрагмент HTML.
используя .a < . >в качестве селектора будет выбран первый и третий. Однако, если вы хотите выбрать тот, который имеет оба a и b , вы можете использовать селектор .a.b < . >. Обратите внимание, что это не будет работать в IE6, просто выберите .b (последний).
Это очень ясно, что для добавления двух классов в одном div, сначала вы должны создать классы, а затем объединить их. Этот процесс используется для внесения изменений и уменьшения числа нет. классов. Те, кто делает сайт с нуля, в основном, использовал этот тип методов. они делают два класса первый класс для цвета и второй класс-для установки ширины, высоты, стиля шрифта и т. д. Когда мы объединяем оба класса, то первый класс и второй класс оба являются в эффект.
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.