CSS ignores id of div, but not class

Question

I've been staring at this for while now but I can't figure out why my css file ignores the id tag of my div. I have done pretty much exactly the same thing before but now suddenly it doesn't work. Any idea why?

http://jsfiddle.net/phacer/dmf6V/

.canvas {
    background: #c5c5c5; 
    border: 1px #676767 solid;
    width: 600px;
    height: 338px;
    position: absolute;
}

#2dcanvas {
    left: 0;
}

#3dcanvas {
    right: 0;
    background: black; 
}

.canvas_container {
    width: 1210px;
    position: relative;
    margin: 0 auto;
    height: 340px;
}



<div class="canvas_container">
    <div class="canvas" id="2dcanvas">/div>
    <div class="canvas" id="3dcanvas"></div>
</div>

3dcanvas should be to the right while the 2dcanvas should be on the left.

The answer [is in this answer on SO](http://stackoverflow.com/a/79022/1846192).. — Mathijs Flietstra, Oct 16 '13 at 09:06

score 3 · Accepted Answer · answered Oct 16 '13 at 09:08

Because IDs can't start with the digits/Numbers, you can set it alphanumeric:

<div class="canvas_container">
    <div class="canvas" id="canvas2d"></div>
    <div class="canvas" id="canvas3d"></div>
</div>

CSS

div#canvas2d {
    left: 0;
}

div#canvas3d {
    right: 0;
    background: black; 
}

Example

score 1 · Answer 2 · answered Oct 16 '13 at 09:07

ids and classes in HTML aren't allowed to begin with numbers, so that'll be why.

Forked the fiddle with different ids and hey presto:

.canvas {
    background: #c5c5c5; 
    border: 1px #676767 solid;
    width: 600px;
    height: 338px;
    position: absolute;
}

#twodcanvas {
    left: 0;
}

#threedcanvas {
    right: 0;
    background: black; 
}

.canvas_container {
    width: 1210px;
    position: relative;
    margin: 0 auto;
    height: 340px;
}

<div class="canvas_container">
    <div class="canvas" id="twodcanvas"></div>
    <div class="canvas" id="threedcanvas"></div>
</div>

http://jsfiddle.net/Ydy5F/1/

score 0 · Answer 3 · answered Oct 16 '13 at 09:07

I believe it has to do with the fact the ID starts with a letter.

Change the ID to starting with a letter and it will work just fine.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

score 0 · Answer 4 · answered Oct 16 '13 at 09:08

0

Class identifiers are allowed to start with a number, but ID identifiers are not.

answered Oct 16 '13 at 09:08

Patsy Issa

11,113
4
55
74

score 0 · Answer 5 · answered Oct 16 '13 at 09:08

If the ids/selectors are modified not to start with a number they satisfy the spec and take effect:

CSS

#d2canvas {
    left: 0;
}

#d3canvas {
    right: 0;
    background: black; 
}

HTML

<div class="canvas_container">
    <div class="canvas" id="d2canvas">/div>
    <div class="canvas" id="d3canvas"></div>
</div>

JS Fiddle: http://jsfiddle.net/dmf6V/2/

CSS ignores id of div, but not class

5 Answers5