Why doesn't the item id start with an integer?

Question

I learn about jQuery selector.

The w3schools tutorial says, "Do not start the id attribute with a number, this may cause problems in some browsers." I tested and saw that this really does not work. I wonder what is the technical cause of this problem?

Answer 1

Why doesn't the item id start with an integer?

They can. But the CSS ID selector cannot begin with a number. For example, this HTML is valid :

<div id="1foo">testing 1 2 3</div>

... but this CSS is not valid:

#1foo {
    color: green;
}

CSS , id :

ID " " (U + 0023, #), ID, CSS.

CSS:

CSS ( , ) [a-zA-Z0-9] ISO 10646 U+00A0 , (-) (_); , , . ISO 10646 (. ). , "B&W?" "B\&W\?" "B\26 W\3F".

( .)

, #1foo, , CSS. :

HTML:

<div id="1foo">testing 1 2 3</div>

CSS

#\31 foo {
    color: green;
}

... 31 - "1" . :

#\31 foo {
  color: green;
}

<div id="1foo">testing 1 2 3</div>

Hide result

, , . , , CSS. jQuery , FWIW. :.

$("#\\31 foo").css("color", "blue");

... . :

setTimeout(function() {
  $("#\\31 foo").css("color", "blue");
}, 2000);

#\31 foo {
  color: green;
}

<div id="1foo">testing 1 2 3, this should be green, and in two seconds it'll turn blue</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Hide result

( , , JavaScript, , , .)

, CSS ( HTML , ), . - Alien , . HTML CSS , , , id, HTML, DOM, . , , , , , . , .

Answer 2

, , document.getElementById .

- IE-,

<div id="hello">World</div>

document.hello. , , , document["123id"] .

, , CSS id, . :

#123id {color: red;}      /* It doesn't work */

#\31 23id {color: blue;}  /* Oh yeah! */

? , .

Answer 3

HTML 4:

ID NAME ([A-Za-z]), , ([0-9]), ( "-" ), ( "_" ), ( ":" ) ( "." ).