Is it possible to assign multiple classes to a single HTML container?
Something like:
<article class="column, wrapper">
-
1What problem do you have now? Any way that was the solution to this problem. Any other problem may depend on several factors.– Aurelio De RosaCommented Jan 4, 2012 at 5:05
-
1Though this is doable, I usually use nested containers with CSS inheritance. It is much prettier, and usually more useful.– Jonathan HensonCommented Jan 4, 2012 at 5:12
-
If you are still having an issue after removal of the comma I suggest looking at the guidance on why rules don't work. I've found the most common speed-bump for me is the situation described there as "Use of a shorthand poperty" (i.e., implictly reverting to a default value)– LJ in NJCommented Dec 29, 2015 at 20:50
Add a comment
|
4 Answers
Just remove the comma like this:
<article class="column wrapper">
answered Jan 4, 2012 at 4:52
-
9
-
5Wierd its space instead of commas. But yeah thanks for the answer Commented Oct 23, 2019 at 20:41
From the standard
7.5.2 Element identifiers: the id and class attributes
Attribute definitions
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
Yes, just put a space between them.
<article class="column wrapper">
Of course, there are many things you can do with CSS inheritance. Here is an article for further reading.
answered Jan 4, 2012 at 4:56
-
3How should a browser be expected to react if an element is assigned to multiple classes that set different values for the same attributes. Is there some order of precedence for that? Commented Jan 1, 2014 at 15:22
-
6@JonathanHenson: no, it's not. In case of tied specificity, the rule that occurs later in the CSS wins. Commented Jan 10, 2014 at 12:24
-
1@UlrichSchwarz the later listed CSS class (what I was hoping for when I tested this), or later in all of the CSS files? Because the former most certainly does not work in the browsers I tested in, while I have tested the latter hypothesis. Commented Jan 13, 2014 at 15:22
-
11@JonathanHenson: According to CSS 2.1 specs, "if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself." So it is CSS declaration order. The names in the class attribute have no specified order, since
.foois syntactic sugar for[class ~= foo]ref, "foois a word in theclassattribute". Commented Jan 13, 2014 at 16:50 -
1Update: In the current HTML5 spec, as of 2021, a
classis known as one of many attributes. Class names are assigned as a set of "space-separated tokens”. The class names are separated by “ASCII whitespace” which is defined as: U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, or U+0020 SPACE. Commented Oct 24, 2021 at 1:36
To assign multiple classes to an html element, include both class names within the quotations of the class attribute and have them separated by a space:
<article class="column wrapper">
In the above example, column and wrapper are two separate css classes, and both of their properties will be applied to the article element.
-
25what has this answer different from the previous? Commented Jun 28, 2016 at 22:09
you need to put a dot between the class like
class="column.wrapper">
-
Please add some explanation to your answer such that others can learn from it. Why should one use a dot there, instead of a space? Commented Oct 24, 2021 at 14:39