Can multiple classes be assigned to an element using a comma?

Question

Ive just come accross this on a website im working on.. its something ive not seen before and can't find any explanation of this anywhere so was hoping someone could explain.

So ive come accross an element that is marked up with 2 classes in the following format:

<div class = "class1, class2"></div>

Ive never seen multiple classes assigned to an element like this before.. it looks like a selector to me.. I would expect them to be added like this: (without comma)

<div class = "class1 class2"></div>

is this valid CSS I have just never come accross before or have i just found a slightly weird bug on the page?

There're no bugs. The **second option** is valid, it's how it's always done. — nicael, Dec 21 '15 at 15:56
"must have a value that is a set of **space-separated** tokens representing the various classes that the element belongs to" http://www.w3.org/TR/html5/dom.html#classes — gp., Dec 21 '15 at 16:00

score 2 · Accepted Answer · answered Dec 21 '15 at 15:59

According to specs the first one is invalid:

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.

The second one is valid.

References

class attribute

score 1 · Answer 2 · answered Dec 21 '15 at 16:00

The example is incorrectly syntax. The acceptable markup should be as follows

<div class = "class1 class2"></div>

Now comma separated is acceptable in a stylesheet

.class1, class2 {
  some styling
 }

But this is for handling a class totally different than the example displayed.

score 1 · Answer 3 · edited May 23 '17 at 12:13

Just to add a little bit of extra information than the other answers so far:

The correct syntax (like everyone is saying) is the second - space-separated.
If you use the first (comma separated), then the classes with a comma directly after them won't be applied, but any other class will. For example:

<div class="class1, class2">

will apply class2 only to the div.

<div class="class1 class2,">

will apply class1 only

<div class="class1 , class2">

will successfully apply both classes.

<div class="class1,class2">

will load neither

Note that this extends for more than two classes: class="class1 class2, class3" will apply class1 and class3, for instance.

It transpires that any class name you try to add which contains an invalid or unescaped special character (see Here and here) will not load, but it doesn't stop the other valid class names from loading. Because classes are space separated, the DOM interprets "class1, class2" as two classes class1, and class2, and determines class1, to be invalid as , is a special character in CSS.

score 0 · Answer 4 · edited Dec 28 '15 at 09:37

You can use a data-* attribute to assign classes to any element separated by comma and then use some JavaScript to automatically assign classes removing commas. Technically, the classes you store in data-classes attribute(suppose) is a string as a whole. You grab that string use string's split method to store the class names removing the commas from n-between and the run a for loop to assign the values to the rea 'class' attribute.

Here's the script I coded-

//helper function which returns all the elements matching the selector passed as the argument
function $$(selector) {
  var elements= document.querySelectorAll(selector);
  return [].slice.call(elements);
}

//select all elements having [data-classes] attribute and the do the stuff
$$("[data-classes]").forEach(function(el) {
  var dataClasses= el.getAttribute("data-classes");
  var classes= dataClasses.split(",");

  for(var i=0; i<classes.length; i++) {
    el.classList.add(classes[i]);
  }
});

Now you can do like this-

<button data-classes="button,button-large,button-fancy">You Button</button>

(include no white space between commas/classNames)

NOTE: MAKE SURE THAT this script is included at the very top of everything in the <head> so that it's the first thing that runs when page is loaded, even before all the CSS files.

Can multiple classes be assigned to an element using a comma?

4 Answers4