Class styles not being applied to s

Question

Here's a strange one. This seems pretty simple but just isn't working.

I have images within a container. Images with class="1" should take up the full width of the container div. Images with class="2" should be able to fit 2 images side by side, taking up the full width of the container div. Images with class="3" should be able to fit 3... you get the idea.

However, even though the classes are being applied (inspect the elements!), the styles are not. The only thing that seems to work is a general style for #container img, which Iyou can test in the fiddle by removing the ".1" or ".2" from either style. As soon as you add .1, the images no longer take on the style, even if they are class="1"!

All I can think tis that maybe tags don't support the class attr? But I don't think that's true.

I believe the class names cannot start with a number. Try an alpha instead (i.e. a, b, c) — blurfus, Mar 19 '15 at 17:16
HTML5 allows class names to begin with a number, however CSS does not allow selectors to begin with numbers. — jmoerdyk, Mar 19 '15 at 17:17

score 7 · Accepted Answer · answered Mar 19 '15 at 17:15

7

CSS class selectors cannot start with a number.

Use an attribute selector or (more sensibly) better class names.

answered Mar 19 '15 at 17:15

Quentin

914,110
126
1,211
1,335

for seconds you were faster than me ;) – dippas Mar 19 '15 at 17:15
fastest vote ups i have see in a while, just need few words. – Stickers Mar 19 '15 at 17:19
Heh, something I probably should have known. Thanks! – GtwoK Mar 19 '15 at 17:29

score 0 · Answer 2 · answered Apr 11 '15 at 01:50

The problem is that

In CSS, identifiers [...] cannot start with a digit.

That means that class selectors can start with a digit, but you must escape it properly.

To escape a digit d, you can use \00003d or \3d (note the whitespace).

For example,

.\31 {
  background: #0f0;
}

<div class="1">Foo bar</div>

Class styles not being applied to s

2 Answers2