My CSS isn't being applied to elements with IDs

Question

I am trying to have a background box behind my text and I cant get it to work. I have done this before and it worked fine, but I can't see where I have gone wrong this time. I have checked to make sure I have linked the CSS to the HTML correctly by changing the background-color, which worked.

HTML:

<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body> 
<h2><center><a href="Digital Portfolio.html"><font color="orange" size="7">Navigation</font></a></center></h2>
<center>
        <div id="1"><a href="The Online World.html">The Online World</a></div>
        <div id="2"><p><a href="Animation.html">Animation</a></p></div>
        <div id="3"><p><a href="Creating a app.html">Creating an app</a></p></div>
        <div id="4"><p><a href="minigame.html">Mini Game</a></p></div>
        <div id="5"><p><a href="Gallery.html">Gallery</a></p></div>
        <div id="6"><p><a href="Be Creative.html">Be Creative</a></p></div>
        <div id="7"><p><a href="About me.html">About me</a></p></div>
</center>
</body>
</html>

CSS:

body {
    color: black;
    background-color: black;
    margin: 0;
}

#1{
    width: 7%;
    margin: 50px auto 50px auto;
    padding: 2%;
    background-color: white;
    box-shadow: 0px 0px 1px rgba(0,0,0,.90);
    position: relative;
}

what do you mean by "background box ", what are your trying to achieve? — atmd, Jan 12 '15 at 17:54
use alphabets instead of numbers in ID. i think it works fine http://jsbin.com/guqogajuta/1/edit?html,css,output — krozero, Jan 12 '15 at 17:56
If you claim to be html5 you shouldn't use the `` or the `` tag. Changing the font size & color and centering a block should be done in CSS anyway, even if you're not using html5. — Stephen P, Jan 12 '15 at 18:59

user2864740 · Answer 1 · 2015-01-12T19:06:01.340

The problem is not with the HTML / element ID - browsers have supported the "lenient" ID for a long time, which is why it is part of HTML5. While the HTML4 specification is different, if this was a major breaking change it wouldn't be in HTML5 - 'nough said.

The real issue the CSS selector, not the element ID. A CSS selector that begins with a number must have the number escaped.

That is, #1 is an invalid CSS selector while #\31 is valid - and matches elements with id=1.

This is a CSS parsing rule, for backwards compatibility now, and not an HTML or ID restriction. See CSS character escape sequences for gritties on escaping "odd" CSS selectors. Or see the w3c token/lexing train tracks. (For example, the selector to match id=1hello is #\31 hello, with the space - good grief!)

The corrected selector can be verified with this fiddle:

<div id=1>Hello world!</div>

#\31 {
   color: blue;
   font-size: 30px;
}

That being said, I avoid element IDs that are not trivial CSS selectors to avoid this extra work.

score 1 · Answer 2 · edited May 23 '17 at 12:30

Element IDs can't start with numbers. As soon as you change that, everything is good: http://jsfiddle.net/gr5956br/

body {
color: black;
background-color: black;
margin: 0;
}

#a1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}

<body> 
<h2><center><a href="Digital Portfolio.html"><font color="orange" size="7">Navigation</font></a></center></h2>
<center>
        <div id="a1"><a href="The Online World.html">The Online World</a></div>
        <div id="a2"><p><a href="Animation.html">Animation</a></p></div>
        <div id="a3"><p><a href="Creating a app.html">Creating an app</a></p></div>
        <div id="a4"><p><a href="minigame.html">Mini Game</a></p></div>
        <div id="a5"><p><a href="Gallery.html">Gallery</a></p></div>
        <div id="a6"><p><a href="Be Creative.html">Be Creative</a></p></div>
        <div id="a7"><p><a href="About me.html">About me</a></p></div>
</center>
</body>

Your original version with numbers (just so you can see that's the issue):

body {
color: black;
background-color: black;
margin: 0;
}

#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}

<body> 
    <h2><center><a href="Digital Portfolio.html"><font color="orange" size="7">Navigation</font></a></center></h2>
    <center>
            <div id="a1"><a href="The Online World.html">The Online World</a></div>
            <div id="a2"><p><a href="Animation.html">Animation</a></p></div>
            <div id="a3"><p><a href="Creating a app.html">Creating an app</a></p></div>
            <div id="a4"><p><a href="minigame.html">Mini Game</a></p></div>
            <div id="a5"><p><a href="Gallery.html">Gallery</a></p></div>
            <div id="a6"><p><a href="Be Creative.html">Be Creative</a></p></div>
            <div id="a7"><p><a href="About me.html">About me</a></p></div>
    </center>
    </body>

Note: In HTML 5 [`id`](http://www.w3.org/TR/html5/dom.html#the-id-attribute) is supposed to work with numbers. — Spencer Wieczorek, Jan 12 '15 at 18:00
Yeah, but there are still issues with that, as you can see in the examples above. They are identical, except for the IDs. We should probably refrain from using numbers at least for a while. — Shomz, Jan 12 '15 at 18:01
Yes I know, that's why I said it's *supposed* to. Also note that the user didn't say: ` ` at the top, so we can't be sure if they are using HTML 5. — Spencer Wieczorek, Jan 12 '15 at 18:04
On both sides of the fence here: the OP did add [tag:html5] to their post, so we should be able to assume that, but I imagine people may be using that tag and not **really** writing HTML5 (for example, the OP is [using ``, which is obsolete in HTML5](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font)). On the other hand, the best answers cover caveats and gotchas, so it's a good idea to say "You can't use numbers as IDs *except in HTML5*". — rockerest, Jan 12 '15 at 18:15

rockerest · Accepted Answer · 2016-11-24T07:15:15.377

1

While ids can technically be numbers (in HTML5), it's got weird support in browsers because of backwards compatibility with the HTML4 spec.

ids should start with a letter for compatibility.

<div id="a1"><a href="The Online World.html">The Online World</a></div>

and

#a1{
    width: 7%;
    margin: 50px auto 50px auto;
    padding: 2%;
    background-color: white;
    box-shadow: 0px 0px 1px rgba(0,0,0,.90);
    position: relative;
}

works as expected.

edited Nov 24 '16 at 07:15

answered Jan 12 '15 at 17:59

rockerest

10,412
3
37
67

I'm always amazed at how answers telling pretty much the same thing that others had told a few minutes earlier get upvoted instead of the original ones. :) – Shomz Jan 12 '15 at 18:06
1

@Shomz same! :) For what it's worth, I was writing it for a while and looking things up, so you just managed to beat me to submission :) Upvote coming your way! – rockerest Jan 12 '15 at 18:07
Yeah, it seems to have started happening so frequently a few months ago. :) Upvotes exchanged! – Shomz Jan 12 '15 at 18:09
1

thankyou and @Shomz thankyou aswell, i didnt know about the numbers thing well i will keep that in mind – Daniel Adams Jan 12 '15 at 18:16
1

@downvoter could you help me improve my answer by elaborating how my answer is ["egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect"](http://stackoverflow.com/help/privileges/vote-down)? I also welcome helpful edits to the answer itself and helpful comments. – rockerest Jan 12 '15 at 18:58
I'm curious about the downvote as well. Probably the same reason I got one, too... – Shomz Jan 12 '15 at 20:45

Master Yoda · Answer 4 · 2015-01-14T12:37:18.767

Do you mean something like this?

HTML

<body> 
<h2><center><a href="Digital Portfolio.html"><font color="orange" size="7">Navigation</font></a></center></h2>
<center>
    <div class="background-box" >
        <div id="One"><a href="The Online World.html">The Online World</a></div>
        <div id="2"><p><a href="Animation.html">Animation</a></p></div>
        <div id="3"><p><a href="Creating a app.html">Creating an app</a></p></div>
        <div id="4"><p><a href="minigame.html">Mini Game</a></p></div>
        <div id="5"><p><a href="Gallery.html">Gallery</a></p></div>
        <div id="6"><p><a href="Be Creative.html">Be Creative</a></p></div>
        <div id="7"><p><a href="About me.html">About me</a></p></div>
    </div>
</center>
</body

CSS

   body {
color: black;
background-color: black;
margin: 0;
}

#One{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}

You shouldnt use numerical numbers for ID's. Replace with characters and you will be fine.

Fiddle

Dee · Answer 5 · 2015-01-12T18:52:26.267

You can also style the div's for less markup. And then style each link as needed. http://codepen.io/dfrierson2/pen/RNoWZe

body {
color: #fff;
background-color: pink;
margin: 0;
}

div {

  width: 7%;
  background: #fff;
}

#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}

<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body> 
<h2><center><a href="Digital Portfolio.html"><font color="orange" size="7">Navigation</font></a></center></h2>
<center>
        <div id="1"><a href="The Online World.html">The Online World</a></div>
        <div id="2"><p><a href="Animation.html">Animation</a></p></div>
        <div id="3"><p><a href="Creating a app.html">Creating an app</a></p></div>
        <div id="4"><p><a href="minigame.html">Mini Game</a></p></div>
        <div id="5"><p><a href="Gallery.html">Gallery</a></p></div>
        <div id="6"><p><a href="Be Creative.html">Be Creative</a></p></div>
        <div id="7"><p><a href="About me.html">About me</a></p></div>
</center>
</body>
</html>

My CSS isn't being applied to elements with IDs

5 Answers5