How to capture id in css selector

Question

When I try to create table and try to add color, I suffered some problem.

in css selector I defined id,but selector #1 didn't work well.

Why this selector didn't work?

And How to fix it?

Thanks

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

#1{
background-color:aqua;}

#2{
background-color:aqua;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td id=1>1</td>
    <td id=2>2</td>
    <td id=3>3</td>
  </tr>
  <tr>
    <td id=4>4</td>
    <td id=5>5</td>
    <td id=6>6</td>
  </tr>
  <tr>
    <td id=7>7</td>
    <td id=8>8</td>
    <td id=9>9</td>
  </tr>
</table>

Does this answer your question? [can I have a div with id as number?](https://stackoverflow.com/questions/5672903/can-i-have-a-div-with-id-as-number) — Kaelan Mikowicz, Apr 04 '20 at 03:54

score 2 · Accepted Answer · answered Apr 04 '20 at 03:57

IDs can't start with numbers. A good workaround is to add a meaningful name before the number. Also, as ellitt said, the id in the html should be in quotes.

For example:

HTML:

<text id="alert1">Some text</text>
<text id="alert2">Some text</text>

CSS:

#alert1 {
    background-color: blue;
}

#alert2 {
    background-color: green;
}

score 0 · Answer 2 · answered Apr 04 '20 at 04:08

0

Your id cannot be a number. try putting a string as a selector and then try.

It should work.

answered Apr 04 '20 at 04:08

Krish

47
3

score 0 · Answer 3 · answered Apr 04 '20 at 07:55

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. So, remove the numbers from id and replace them with string.

<td id="name1">Your Code</td>
<td id="name2">Your Code</td>

#name1 {
   background-color:aqua;
}

#name2 {
  background-color:aqua;
}

How to capture id in css selector

3 Answers3