5

I have a case with computer-generated class names where it could be that the class name might contain a space character (I don't have direct control over the IDs that are turned into class names). I figured out how to escape all characters in CSS (see the excellent answers in Which characters are valid in CSS class names/selectors? and http://mathiasbynens.be/notes/css-escapes).

But I didn't manage to get a space character escaped in a CSS class name in the HTML code.

I now used a solution that avoids spaces, but I'm curious nevertheless if / how it would be possible to escape the space character in the class attribute value.

E.g.: my class name is "a b".

I can write a CSS selector in CSS as .a\20 b { }.

But using &#x20; in the attribute such as <div class="a&#x20;b"/> will be interpreted the same as <div class="a b"/> and this defines two classes.

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Peter T.
  • 2,927
  • 5
  • 33
  • 40
  • 2
    No `class="a b"` means this element contains two class `a` & `b`. – AA Shakil Jun 12 '18 at 08:06
  • @AAShakil not if the class name is generated in such a way that it may contain spaces – Claire Jun 12 '18 at 08:10
  • 2
    @ATomCalledStu — A class name cannot contain a space. If your code generates HTML which puts a space between two tokens in a class attribute, then, no matter what you intended it to mean, it has two class names. – Quentin Jun 12 '18 at 08:30

3 Answers3

3

https://html.spec.whatwg.org/multipage/dom.html#classes

When specified on HTML elements, the class attribute must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

Of course it’s possible to escape a space character, e.g. &#x20; — HTML attribute values can contain character references per https://html.spec.whatwg.org/multipage/syntax.html#syntax-attribute-value:

Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an ambiguous ampersand.

However, it doesn’t matter whether the space is HTML-escaped or not for the above statement to apply. A HTML-encoded space character still decodes to a space character, and so e.g. class="a&#x20;b" still results in “a set of space-separated tokens”. See e.g. https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state for how double-quoted attribute values are parsed.

Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
  • Yes, well, but this doesn't answer if it's possible to _escape a space character_ in a class name when used in HTML. Does the specs say something about this? – Peter T. Jun 14 '18 at 09:16
  • @PediT. Posted an update that addresses your question. – Mathias Bynens Jun 14 '18 at 11:25
  • Alright, that's what I thought. So there's no way to escape the space in HTML that it becomes part of the CSS class name. Thanks for clarifying this. But, actually, do you agree that it's a bit strange that you _can_ define class names in CSS that do contain a space character, but you can't use this in HTML? I think it would make sense to allow the same escaping rule of CSS in the class attribute value as well ... – Peter T. Jun 14 '18 at 15:19
  • Although they are commonly used together, HTML and CSS are different languages. IMHO it wouldn’t make sense to try and apply the same rules to both of them. – Mathias Bynens Jun 15 '18 at 09:13
  • @PediT. Regarding your thoughts about the specs: the esaping in CSS and HTML is different. The whole syntax is different. Identifiers in CSS can contain spaces (and other special characters), but only escaped. It would not make any sense to forbid this generic mechanism in specific cases in CSS. And it is not specifically _forbidden_ to use spaces in class names in HTML, it is just a side effect of having a space separated list in the class attribute value. HTML has no (better) array syntax to be used here. It would not improve the situation to lessen CSS to match HTML here, would it? – Robert Siemer Aug 21 '19 at 11:11
  • @RobertSiemer you're right that it wouldn't improve to lessen CSS, but I'd expect to extend HTML to provide also some proper escaping rule for this case. – Peter T. Aug 24 '19 at 19:07
2

It recognizes the space as new class name so use . instead of space in css. 

.a.b{
color:red
}
<div class="a b">try me</div>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47
  • Interesting idea, but wouldn't work in my case with computer-generated IDs. An, in fact, my consideration is more of theoretical nature to really understand HTML and CSS syntax in depth. :-) – Peter T. Jun 13 '18 at 07:47
  • Sorry that I wasn't precise, the _class names_ are generated from _IDs_ that I receive from an external source. (But I found a good-enough work-around to avoid spaces in practice.) – Peter T. Jun 13 '18 at 07:57
  • How you do it??? you can do it on generated remove spaces or add dot instaed of spaces – לבני מלכה Jun 13 '18 at 08:00
0

There is no way to escape the space character in the class attribute value and hence will always be interpreted as two different classes.

Shubham Sahu
  • 1
  • 1
  • 2
  • I believe you are right, but do you know where is specified in the HTML/CSS specification? I really wonder why you can escape any char (an in this case the `\20` in CSS class names, but then there is no way to use the class name in HTML. In this case the specification would be rather strange, I think! – Peter T. Jun 13 '18 at 07:51