:(コロン)を含む id や class のセレクタ

CSS

発端は、document.querySelector("#hoge:piyo")などと id が "hoge:piyo" の要素を取ってこようとした時。

これをやると SyntaxError: An invalid or illegal string was specifiedみたいな例外が発生する。

を見ても、ID値に : を入れても大丈夫。

では、CSSセレクタとして大丈夫か。

HASH: #{name}

name: {nmchar}+
nonascii: [^\0-\237]
unicode: \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
escape: {unicode}|\\[^\n\r\f0-9a-f]
nmchar: [_a-z0-9-]|{nonascii}|{escape}

と、まぁ、 : コロンは素直に入れられないが、escapeの\\[^\n\r\f0-9a-f]を使用すればOK。

ってことで、document.querySelector("#hoge\\:piyo")としてやればOK

CSSで書く時も

#hoge\:piyo {
 /*
 .....
 */
}

とすればOK。（↑たぶんシンタックスハイライトが対応してないけど）