How to change the ID in pure CSS JS ?Why My code is not working?

Question

This code is not working, although it seems correct to me. Can you please tell me what's the issue?

<style>
    #101{
        width:1em;
        height:1em;
        padding:1em;
        margin: 1em;
        background-color: green;
        color:red;
    }
</style>
<div class="animation" id="animation">hii</div>
<script>
    document.getElementById('animation').id='101';
</script>

It's not recommended that IDs *start* with numbers but that may be unrelated. — Paulie_D, Jun 24 '20 at 08:13
from the duplicate: https://stackoverflow.com/a/6732899/8620333 — Temani Afif, Jun 24 '20 at 08:19
@GirishSasidharan `101` has three characters and no whitespaces. — t.niese, Jun 24 '20 at 08:25

t.niese · Accepted Answer · 2020-06-24T08:21:32.430

An ID in a selector cannot start with a number:

4.1.3 Characters and case

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. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

You could get around that by writing the selector like this #\31 01, but that is not really recommended (31 is the hexadecimal representation of the character 1):

<style>
     #\31 01{
        width:1em;
        height:1em;
        padding:1em;
        margin: 1em;
        background-color: green;
        color:red;
    }
</style>
<div class="animation" id="animation">hii</div>
<script>
    document.getElementById('animation').id='101';
</script>

So it is better to prefix the ID with some letters.

@TemaniAfif `they cannot start with a digit, two hyphens, …` — t.niese, Jun 24 '20 at 08:21
ok missed that sentence because In my mind it's valid to start with number since we need to make a difference between the Spec defining the ID inside the HTML doc (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) and how to write the selector (the Spec your refering). So it's only invalid to start with a number when writing the selector but it's possible to have number inside the attribute. Many will confuse between both (It was the case for me for a while) — Temani Afif, Jun 24 '20 at 08:26

score 1 · Answer 2 · answered Jun 24 '20 at 08:14

CSS Selectores can't start with a number.

<style>
    #hundred10{
        width:1em;
        height:1em;
        padding:1em;
        margin: 1em;
        background-color: green;
        color:red;
    }
</style>
<div class="animation" id="animation">hii</div>
<script>
    document.getElementById('animation').id='hundred10';
</script>

How to change the ID in pure CSS JS ?Why My code is not working?

2 Answers2