My CSS doesn't affect the HTML code in a specific part?

Question

Here is the HTML and CSS. I don't know where is the problem and why there is no effect.

#1st_column {
  background-color: #181818;
  width: 20%;
  display: block;
  margin-left: 15px;
  height: 800px;
}

<div id="1st_column">
  <h1 id="pop">
    POPULAR <br /> CLASSES
  </h1>
  <p>
    Why not give one of <br /> these popular classes<br /> a look?
  </p>
</div>

Try using an ID which does not start with a digit, but with a letter. — Jost, Apr 11 '17 at 09:00
@domdom the effect of background color and height and every style !! — mego, Apr 11 '17 at 09:00
@Quentin -- html5 says that ids can begin with numbers but many browser doesn't support it. — Super User, Apr 11 '17 at 09:03
Thanks all changing my ID to start without number solved the problem :) — mego, Apr 11 '17 at 09:05
ahmed, you might want to upvote and/or accept thebluefox's answer then. — domsson, Apr 11 '17 at 09:12
@SuperUser — Not true. Browsers have no trouble with IDs starting with a number. See the duplicate question. — Quentin, Apr 11 '17 at 09:42

score 0 · Answer 1 · edited May 23 '17 at 11:46

0

ID's shouldn't start with a number, as it seems browser's don't fully support them yet.

#first_column {
  background-color: #181818;
  width: 20%;
  display: block;
  margin-left: 15px;
  height: 800px;
}

<div id="first_column">
  <h1 id="pop">
    POPULAR <br /> CLASSES
  </h1>
  <p>
    Why not give one of <br /> these popular classes<br /> a look?
  </p>
</div>

Edit

To use ID's starting with a number, you can do so as shown in this answer;

https://stackoverflow.com/a/5672936/19068

<div id="12"></div>

#\31\32 {
    background: #0bf;
}

Each number in the ID must be escaped using \3.

Personally, I wouldn't bother. It's ugly and just because you can do something doesn't mean you should.

edited May 23 '17 at 11:46

Community

1
1

answered Apr 11 '17 at 08:59

Tom

4,257
6
33
49

1

"ID's cannot start with a number" — Since HTML 5, they can. – Quentin Apr 11 '17 at 09:01
1

*" browser's don't fully support them yet"* – Yes they do, if you use the correct CSS selector. – JJJ Apr 11 '17 at 09:02
Fair point @JJJ – Tom Apr 11 '17 at 09:03

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

This should work.

More info about it here : can i have a div with id as number?

#\31\st_column {
  background-color: #181818;
  width: 20%;
  display: block;
  margin-left: 15px;
  height: 800px;
}

<div id="1st_column">
  <h1 id="pop">
    POPULAR <br /> CLASSES
  </h1>
  <p>
    Why not give one of <br /> these popular classes<br /> a look?
  </p>
</div>

edited May 23 '17 at 11:46

Community

1
1

answered Apr 11 '17 at 09:06

Aslam

9,204
4
35
51

My CSS doesn't affect the HTML code in a specific part?

2 Answers2