HTML class attribute with spaces, it is a W3C valid class?

Question

About HTML class attribute, that assigns CSS class (or classes?) to a tag. The use of spaces, like in

....


        

Answer 1

That won't work in the CSS file OR the HTML. <div class="a b c"></div> means the div element has class a AND class b AND class c.

Meanwhile, on the stylesheet side of things, .a b c { property: value; } is not valid because it literally means "element c with ancestor b with ancestor having class a" (and b and c are obviously not valid HTML elements) while .a .b .c { property: value; } would mean "element having class c with ancestor element having class b with ancestor element having class a". Look up CSS specificity rules if this makes no sense to you.

Use dashes or underscores instead of spaces.

Answer 2

This is supported in IE 7 and up, including all modern, non-IE browsers. As other commenters have pointed out, it is actually a list of classes, not a single class with spaces.

A better way to understand this is to give your example a few more options:

<tag class="a b">....</tag>
<tag class="a">....</tag>
<tag class="b">....</tag>

.a.b {} in your css will target the first tag.
.a {} will target the first and second tags.
.b {} will target the first and third tags.

This is why using multiple classes on a single element can be very helpful.

For questions of CSS selectors and pseudo selectors, I like to use this (slightly outdated) table http://kimblim.dk/css-tests/selectors/

Answer 3

these are two different classes a & b separated by space. see w3c DOCS

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.

---

If you have two class

.a { font-weight: bold; }
.b { font-weight: normal; }

and assign in class="a b" or class="b a", then later class will overwrite the prior class having same property, so font weight will be normal.

If you change the CSS definition order,

.b { font-weight: normal; }
.a { font-weight: bold; }

now the later class is bold, so "overwrite the prior class having same property" results font weight bold.

Answer 4

a single class name cannot have spaces. an element can have multiple classes defined by listing the class names separated by a space