0

I was struggling with an image styling:

<img class="2logos" src="logos.png" />

.2logos {width: 166px}

Whatever I tried, it did nothing. Until I removed the digit from the class name. As soon as I named it "logos" instead of "2logos", it worked. I never noted something like this before. Where may the restriction come from? I find this very strange!

thomhawk
  • 17
  • 5

1 Answers1

2

When you reference a class name in a CSS selector, you need to remember that if a first character is not a letter, underscore or a hyphen, you need to escape it.

(You can use CSS validator to verify your stylesheet.)

To escape first digit in your class name, use a \3xnotation (which is short for a full \00003x you'd use for digits in Unicode):

.\32 logos { ... }

(JSFiddle).

Here's a good article on escaping in CSS.

kamituel
  • 34,606
  • 6
  • 81
  • 98
  • 1
    Actually, this is incorrect. However, a leading digit needs to be escaped when writing the CSS selector. –  Oct 21 '15 at 19:59
  • True, I expressed this in a worst possible way @torazaburo :/ – kamituel Oct 21 '15 at 20:01
  • Actually it needs to be `\32(space)logos`. –  Oct 21 '15 at 20:07
  • Right. Thought the non-spaced version worked for me in Chrome as well. – kamituel Oct 21 '15 at 20:09
  • Thank you. I really was not aware of that. It feels so strange: I do webdesign (as a designer, not a programmer though) for so many years now, but I really never came across this problem until now! – thomhawk Oct 23 '15 at 06:51
  • @thomhawk To be honest I didn't know precisely how to handle it either. I just recalled seeing it somewhere, so I looked it up (well, class name with a leading digit is a little unorthodox ;)). That's what I like about SO, I keep learning by providing answers! – kamituel Oct 23 '15 at 07:38