36

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

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

is valid?

This syntax is used by some web-designers and occurs into exported HTML of Adobe InDesign (tested with versions 5 and 6), and another HTML generation softwares...

It (class="a b") is a valid W3C syntax? What versions of CSS and HTML? (starting from which version became valid?)

EDIT: a natural subquestion "W3C say how to interpret it?" (it is an "override" or another renderization behaviour?) was posted here.

Community
  • 1
  • 1
Peter Krauss
  • 13,174
  • 24
  • 167
  • 304
  • 13
    It's not a class name with spaces, it's multiple class names. Your example is applying both classes `a` and `b` to the element. – Shmiddty Dec 10 '12 at 20:41
  • @PeterKrauss "what W3C says about CORRECT renderization of class="a b": bold or normal?" - How about you actually going and reading up/trying some samples a little? – Sajjan Sarkar Dec 10 '12 at 21:31
  • Answering comments: @Shmiddty, thanks, I corrected (EDIT) the title; – Peter Krauss Dec 14 '12 at 10:59
  • @dystroy, the questions are complementar, because here I asking about W3C standards, and, after title correction, here is about "valid attribute class values", not about name-syntax; – Peter Krauss Dec 14 '12 at 11:00
  • @Sajjan, sorry, I think the addition of a subquestion cause problems, I change (EDIT) and send subquestion to a [new question about interpretation](http://stackoverflow.com/q/13849655/287948). – Peter Krauss Dec 14 '12 at 11:00
  • 6
    This is a real question and on-topic. It should not have been closed as “not a real question”. It might be a duplicate, but then this should be clearly identified. – Jukka K. Korpela Oct 17 '13 at 12:19
  • This is a very old question, but it should be noted that the answer to whether it's valid can be discovered simply by running the markup through a validator. – BoltClock May 06 '18 at 05:01

4 Answers4

48

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.

Ohad Schneider
  • 36,600
  • 15
  • 168
  • 198
xkeshav
  • 53,360
  • 44
  • 177
  • 245
  • OK, thanks (!), it is valid, since html401. Now another question, indirectly posted, but not explicit: W3C say how to interpret it? It is an "override" or another renderization behaviour? PS: I wiil edit question to add this subquestion. – Peter Krauss Dec 10 '12 at 20:59
  • you can interpret it in css like so: – Jason Dec 10 '12 at 21:09
  • @diEcho bhai ek baar mai samajh aa gaya hai! Thanks bacche! – taurus05 Nov 20 '19 at 13:10
4

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/

Jason
  • 2,280
  • 23
  • 22
  • Notice there is no space between .a.b in my css example. – Jason Dec 10 '12 at 21:17
  • THANKS! I edited question: about override interpletation (browser renderization), what the correct behaviour. – Peter Krauss Dec 10 '12 at 21:27
  • In that case, your question might be duplicated here: http://stackoverflow.com/questions/3066356/multiple-css-classes-properties-overlapping-based-on-the-order-defined – Jason Dec 10 '12 at 21:32
  • actually your first css class would only affect the first tag, not all three as you stated. Both classes should be on the tag before this one will take effect. Example: http://jsfiddle.net/PP9yf/ – Pevara Dec 10 '12 at 22:22
  • d'oh! You are right. Thanks @PeterVR! `.a,.b{}` would target all 3 – Jason Dec 10 '12 at 22:23
3

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

Sajjan Sarkar
  • 3,900
  • 5
  • 40
  • 51
  • @PeterKrauss CSS class names with spaces are not INVALID, in that u wont get any errors .. But it is pointless to have a space in a class name as u wont see ur style being applied.So in my book you cannot have a space.It is a waste of time beyond this. CSS(any version) detokenizes class names based on the space character. For more info about the BASICs of CSS: http://www.w3.org/TR/WD-css3-syntax-20030813/#syntax – Sajjan Sarkar Dec 10 '12 at 21:27
  • About terminology, sorry my confusion, I edited the question title from "CSS class name with spaces...", to "HTML class attribute with spaces...". About CSS detokenization, thank you, is a reinforcement of the cited [standard TR/html401, 7.5.2](http://www.w3.org/TR/html401/struct/global.html), that no other one noted here. – Peter Krauss Dec 12 '12 at 23:00
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.

Ennui
  • 10,102
  • 3
  • 35
  • 42
  • Yes, ok (Thanks!). My question is only about `class="a b c"`... @diEcho showed exactly the W3C first standard (HTML4.01) that permit this syntax. Now another question is "how to interpret this?", and, ok, you say "a AND b AND c": how browser MUST render this? is an "override" when a and b use the same properties? – Peter Krauss Dec 10 '12 at 21:07
  • I know this is old, but a valid example of targeting all 3 classes in CSS would be `.a.b.c { property: value; }` – Sam Jun 10 '14 at 18:08