494

Is it possible to assign multiple classes to a single HTML container?

Something like:

<article class="column, wrapper">
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
ARGO
  • 5,111
  • 4
  • 16
  • 11
  • 1
    What problem do you have now? Any way that was the solution to this problem. Any other problem may depend on several factors. – Aurelio De Rosa Jan 04 '12 at 05:05
  • 1
    Though this is doable, I usually use nested containers with CSS inheritance. It is much prettier, and usually more useful. – Jonathan Henson Jan 04 '12 at 05: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](https://developer.mozilla.org/en-US/docs/Web/CSS/Common_CSS_Questions#Style_rules_that_don.27t_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 NJ Dec 29 '15 at 20:50

4 Answers4

667

Just remove the comma like this:

<article class="column wrapper">
Aurelio De Rosa
  • 21,856
  • 8
  • 48
  • 71
222

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.

ProgramGamer
  • 402
  • 5
  • 12
Jonathan Henson
  • 8,076
  • 3
  • 28
  • 52
  • 3
    How 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? – EternallyCurious Jan 01 '14 at 15:22
  • @EternallyCurious The attributes are aggregated by the browser, so this behavior will be non-deterministic. – Jonathan Henson Jan 03 '14 at 16:24
  • 6
    @JonathanHenson: no, it's not. In case of tied specificity, the rule that occurs later in the CSS wins. – Ulrich Schwarz Jan 10 '14 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. – Jonathan Henson Jan 13 '14 at 15:22
  • 11
    @JonathanHenson: According to [CSS 2.1 specs](http://www.w3.org/TR/CSS2/cascade.html#cascading-order), "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 `.foo` is syntactic sugar for `[class ~= foo]` [ref](http://www.w3.org/TR/CSS2/selector.html#class-html), "`foo` is a word in the `class` attribute". – Ulrich Schwarz Jan 13 '14 at 16:50
  • **Update:** In the [current HTML5 spec](https://html.spec.whatwg.org/), as of 2021, a `class` is known as one of many [attributes](https://html.spec.whatwg.org/#attributes-3). Class names are assigned as a set of ["space-separated tokens”](https://html.spec.whatwg.org/#space-separated-tokens). The class names are separated by [“ASCII whitespace”](https://infra.spec.whatwg.org/#ascii-whitespace) which is defined as: U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, or U+0020 SPACE. – Basil Bourque Oct 24 '21 at 01:36
26

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.

Webeng
  • 7,050
  • 4
  • 31
  • 59
-10

you need to put a dot between the class like

class="column.wrapper">

amit kumar
  • 1
  • 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? – Nico Haase Oct 24 '21 at 14:39