CSS セレクタのidに数値を指定する場合

目的

HTML要素に「数値のID（例：<div id="123">）」がある場合、CSSではそのまま#123のように書くと無効（構文エラー）になります。

数値で始まるIDを指定するにはエスケープ（escape）または属性セレクタが必要です。

セレクタのidの数値をcssから指定する

htmlのidは数値です。cssではエスケープ(\3)を使用して指定します。

<style>
    #\31 {
        color: red; /* id=1 */
    }
    #\32 {
        color: blue; /* id=2 */
    }
    #\31 1 {
        color: green; /* id=11 */
    }
    #\31 2 {
        color: purple; /* id=12 */
    }
    [id="13"] {
        color: red; /* id=13 */
    }
    #\31 abc {
        color: yellow; /* id=1abc */
    }
</style>
<p id="1">test1</p>
<p id="2">test2</p>
<p id="11">test11</p>
<p id="12">test12</p>
<p id="13">test13</p>
<p id="1abc">test1abc</p>

2行目は、15行目のid="1"を指定しています。1の前にエスケープの(\3)を追加しています。
8行目は、id="11"の場合です。1と1の間に空白が必要です。
14行目のように属性セレクタも使えます。読みやすい方法です。

セレクタのidの数値をjsとjQUeryから指定する

htmlのidは数値です。

➝jsは数値のそのままの指定が可能です。
→jQueryはエスケープが必要です。

<p id="3">test3</p>
<p id="5">test5</p>
<p id="51">test51</p>
<p id="52">test52</p>
<p id="5abc">test5abc</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    // js
    document.getElementById("3").style.color = "red"; // id=3

    // jquery
    $("#\\35").css("color", "blue"); // id=5
    $("#\\35 1").css("color", "green"); // id=51
    $('[id="52"]').css("color", "purple"); // id=52
    $("#\\35 abc").css("color", "yellow"); // id=5abc
</script>

9行目は、jsからidを指定しています。数値そのままで指定できます。
12行目からは、jQueryでの指定です。idの桁数が1桁より大きい場合は次の値との間に空白が必要です。
14行目のように属性セレクタも使えます。読みやすい方法です。