CSS can't select classes/id's with numbers in it?

Question

Why can't you use numbers in CSS and is there another way of doing the job? I have the following code:

<div class="center 400-width" id="position">
    <div class="" id="header">
        Header
    </div>
    <div class="" id="content">
        Content
    </div>
    <div class="" id="footer">
        Footer
    </div>
</div>

The CSS selects the class 400-width which means the container gets a width of 400px. And the background-color is for checking if it's true.

.400-width{
    width:400px;
    background-color:blue;
    color:white;
}

It doesn't happen right now as you can see here

I solved the problem by replacing 400- by four. So it becomes fourwidth.

you can use numbers in css classes but not as first character. — Fabrizio Calderan, Aug 26 '13 at 09:20
Have a look at [this question](http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors) — Artyom Neustroev, Aug 26 '13 at 09:22

score 6 · Accepted Answer · answered Aug 26 '13 at 09:22

6

i have faced the same problem.... actually it not a problem anyway..

instead of '.400-width' use '.width-400'

answered Aug 26 '13 at 09:22

Manjunath Hegde

404
4
21

score 4 · Answer 2 · edited Jan 02 '18 at 22:27

4

this can help you with the semantic of css

css semantic

Bad Semantics

<div class="article">
  <div class="article_title">Smurf Movie Kinda Sucks</div>
  <div class="the_content">Not surprisingly, this weeks release of
     <div class="darkbold">The Smurfs</div> kinda sucks.</div>
</div>

Good Semantics

<article>
  <h1>Smurf Movie Kinda Sucks</h1>
  <p>Not surprisingly, this weeks release of
     <b>The Smurfs</b> kinda sucks.</p>
</article>

edited Jan 02 '18 at 22:27

Seth McClaine

9,142
6
38
64

answered Aug 26 '13 at 09:23

Ricardo Alves

642
2
13
34

The link may theoretically answer the question, but [it would be preferable](http://meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – JJJ Aug 26 '13 at 10:55

score 3 · Answer 3 · answered Aug 26 '13 at 09:25

3

.width-400{
    width:400px;
    background-color:blue;
    color:white;
}

answered Aug 26 '13 at 09:25

akash

2,117
4
21
32

score 3 · Answer 4 · answered Aug 26 '13 at 09:30

3

CSS classnames can't begin with a number, they must begin with a letter; this has caught me out before when doing grid systems etc. You might use width-400 or for brevity w400.

answered Aug 26 '13 at 09:30

David Goss

677
4
8

score 3 · Answer 5 · answered Aug 26 '13 at 09:47

3

._400-width{
    width:400px;
    background-color:blue;
    color:white;
}

answered Aug 26 '13 at 09:47

sarsarahman

1,078
5
11
26

score 1 · Answer 6 · edited May 23 '17 at 12:32

1

According to W3C spec CSS identifier cannot start with number, but if you would like to keep 400-width, you can use a little trick and replace leading number n with \3n like

.\34 00-width{
  width:400px;
  background-color:blue;
  color:white;
}

Here you have it working in your jsfiddle, plus few other samples, and related SO comment

edited May 23 '17 at 12:32

Community

1
1

answered Jun 05 '15 at 15:10

tomalec

890
10
27

CSS can't select classes/id's with numbers in it?

6 Answers6

Bad Semantics

Good Semantics

Linked