40

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.

Improve this question
7
  • 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. Commented Dec 10, 2012 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? Commented Dec 10, 2012 at 21:31
  • Answering comments: @Shmiddty, thanks, I corrected (EDIT) the title; Commented Dec 14, 2012 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; Commented Dec 14, 2012 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. Commented Oct 17, 2013 at 12:19

4 Answers 4

Reset to default
52

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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.
you can interpret it in css like so:
@diEcho bhai ek baar mai samajh aa gaya hai! Thanks bacche!
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/

Improve this answer

5 Comments

Notice there is no space between .a.b in my css example.
THANKS! I edited question: about override interpletation (browser renderization), what the correct behaviour.
In that case, your question might be duplicated here: stackoverflow.com/questions/3066356/…
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: jsfiddle.net/PP9yf
d'oh! You are right. Thanks @PeterVR! .a,.b{} would target all 3
3

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

Improve this answer

2 Comments

@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: w3.org/TR/WD-css3-syntax-20030813/#syntax
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, that no other one noted here.
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.

Improve this answer

2 Comments

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?
I know this is old, but a valid example of targeting all 3 classes in CSS would be .a.b.c { property: value; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.