0

I just spent a few good minutes debugging why my CSS was not taking. It turns out that naming a CSS class 2col (vs col2) simply does not compile in the browser. Why is this? That is what is reserved about the numbers in CSS class prefixes?

Matthew Peters
  • 1,861
  • 2
  • 14
  • 16
  • 2
    no real reason I guess, just what the spec says: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names-selectors – Pevara May 05 '15 at 20:55
  • 1
    no idea too, but you can use `[class="2col"] {...}` that works. – Stickers May 05 '15 at 21:03

1 Answers1

3

You can begin CSS classes with numbers. You just need to escape the first one for it to work.

.\32-4-1 {
  background-color: black;
  height: 100px;
  width: 100px;
}
<div class="2-4-1"></div>

Alternatively you can use the whitespace separated attribute selector ~=:

[class~="2-4-1"]

It's also worth noting that the HTML5 spec does not restrict the allowed characters in the [class] attribute.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367