how to change the css of a div tag set within a div tag

Question

I want to change the background color of the div tag with div element with class of ind and id of three to blue. here is my css

h1 {
  text-align: center;
}

#identify {
  text-align: center;
}

.container {
  border-style: dotted;
  width: 800px;
  height: 400px;
  position: absolute;
  right: 550px;
}

.ind {
  float: left;
  position: relative;
  top: 40%;
  padding: 50px;
  left: 200px;
}

.ident {
  position: relative;
  display: inline;
  float: left;
  text-align: center;
  padding: 10px;
}

#2.ind {
  background-color: blue;
}

<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="project" content="hello">
  <title></title>
</head>

<body>
  <link rel="stylesheet" type="text/css" href="2css.css">
  <h1>Set the distance!</h1>
  <p id="identify">To play this game, you must be at least 18 years old. You must also fill out some information.</p>
  <div class="container">
    <div class="ind" id="2">2</div>
    <div class="ind" id="3">3</div>
    <div class="ind" id="4">4</div>
  </div>
</body>

</html>

In the browser for some reason the background color of div class ind with id of 2 won't change to blue. Any suggestions?

By the way, the word identity is supposed to be an id element. I just don't know how to use stackoverflow. Anyway, the only problem I have is the question asked above. — pokemon man, Feb 06 '19 at 17:34
IDs must be unique, so there's no use in select an element with an id of "2" and anything else. Just an id of 2 is plenty. — Heretic Monkey, Feb 06 '19 at 17:42

score 2 · Answer 1 · answered Feb 06 '19 at 22:02

Despite the many claims otherwise, IDs in HTML5 can indeed start with a number. Care must be taken when referring to these elements in other contexts, however. First some code:

console.log(document.querySelector('#\\0032') == null);

#\0032 { background-color: black; color: white }
[id="2"] { background-color: white; color: black }

<p id="2">
Two
</p>

You do need to escape the number, using an Unicode escape sequence (I've expanded it to its four digit hexidecimal representation so that's clear). You can use an attribute selector, but that changes its specificity (see this question's answers for more information on that topic) to be lower than IDs. You can see that the second selector is not specific enough to override the ID selector. Not necessarily a bad thing, but certainly something to be aware of.

Note that despite it working, and being allowed by the relevant specifications, it is generally frowned upon because of the need for escaping in CSS. Note that also means that in something like the DOM method querySelector, when accessed in JavaScript, the escape character must also be escaped (since you must use a JavaScript string, which uses the same escape character). I've added an example of that to the snippet as well.

score 1 · Answer 2 · answered Feb 06 '19 at 17:37

1

CSS IDs cannot contain only number.

Two solutions:

1- change your ID in alphanumeric, i.e. id="div2"

2- use data attribute as data-id="2" and then in CSS use

.ind[data-id="2"]{background-color:blue;}

answered Feb 06 '19 at 17:37

Alfra

165
12

1

IDs in HTML5 and CSS can contain just numbers. See [this answer](https://stackoverflow.com/a/6732899/215552). – Heretic Monkey Feb 06 '19 at 17:40
You don't need to add a data-attribute. The attribute selector works on every attribute `[id="2"]` – vandijkstef Feb 06 '19 at 22:22

Harshit · Answer 3 · 2019-02-06T17:54:15.980

0

if you want to access it in css, an id cannot start with a no., thus #2 wont work.

If you want to still use id="2" try:

 #\32 {
  background-color: blue;
}

edited Feb 06 '19 at 17:54

answered Feb 06 '19 at 17:37

Harshit

886
7
18

1

IDs in HTML5 and CSS can contain just numbers. See [this answer](https://stackoverflow.com/a/6732899/215552). – Heretic Monkey Feb 06 '19 at 17:42
I'm sorry but the ans you are referring to talks about classes, and yeah id can have only nos. but they have to be referenced in css differently, if you read my answers first line. – Harshit Feb 06 '19 at 17:48
1

As it can, rephrase your _"An id cannot start with a no."_ or it send the wrong impression (maybe to "_If an id is only a number it needs to be escaped_") – Asons Feb 06 '19 at 17:52
rephrased the sentence :) – Harshit Feb 06 '19 at 17:55
If you follow the links in the answer, however, [one of them](https://www.w3.org/TR/CSS21/syndata.html#characters) refers to *identifiers*, which "includ[es] element names, classes, and IDs in selectors". HTML5, as mentioned, allows any character. See [this answer](https://stackoverflow.com/a/79022/215552) for more information, including the necessity of escaping the characters in CSS. – Heretic Monkey Feb 06 '19 at 21:31

score 0 · Answer 4 · edited Feb 22 '19 at 15:10

0

To give CSS effect to div element id=3, you can do it as below.

.container > .ind[id="3"]
{
  background-color:lightblue;
}

<div class="container">
    <div class="ind" id="2">2</div>
    <div class="ind" id="3">3</div>
    <div class="ind" id="4">4</div>
</div>

edited Feb 22 '19 at 15:10

answered Feb 06 '19 at 17:50

G_real

1,137
1
18
28

how to change the css of a div tag set within a div tag

4 Answers4