CSSとjs idに数値を指定する場合(エスケープ)

目的

１．htmlにある数値のidをcssからエスケープを使用して指定します。

２．htmlにある数値のidをjsから指定します。
➝jsは数値のそのままの指定が可能です。

jQueryではcssと同様にエスケープが必要です。

数値のidをcssから指定する

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

2行目は、15行目のid="1"を指定しています。1の前にエスケープの(\3)を追加しています。
8行目は、id="11"の場合です。1と1の間に空白が必要です。
14行目は、id="1abc"の場合です。

結果

test1

test2

test11

test1abc

数値のidをjsから指定する

<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";

    // jquery
    $("#\\35").css("color", "blue");
    $("#\\35 1").css("color", "green");
    $("#\\35 2").css("color", "purple");
    $("#\\35 abc").css("color", "yellow");
</script>

9行目は、jsからid="1"を指定しています。数値そのままで指定できます。
12行目からは、jQueryでの指定です。idの桁数が1桁より大きい場合は次の値との間に空白が必要です。

結果

test3

test5

test51

test52

test5abc