CSS エスケープ / アンエスケープ
CSS の識別子やセレクター用に CSS.escape() と同じ方法でテキストをエスケープしたり、引用符付きの CSS 文字列用にエスケープしたりします。\HEX のアンエスケープにも対応。
19 文字 · 19 バイト（UTF-8）
0 文字 · 0 バイト（UTF-8）
すべてブラウザ内で実行されます。データがアップロードされることはありません。
CSS エスケープとは？
テキストを、querySelector などのセレクターの id やクラスのような CSS 識別子 として使えるように、CSSOM の CSS.escape() アルゴリズムに従ってエスケープするか、引用符付きの CSS 文字列の内容としてエスケープします。CSS のエスケープをテキストに戻すこともできます。
CSS エスケープの使い方
- エスケープ または アンエスケープ を選びます。
- エスケープする場合は コンテキスト として 識別子 / セレクター（CSS.escape） または 引用符で囲んだ文字列値 を選び、必要に応じて 非 ASCII を \HEX でエスケープ を選びます。
- id、クラス、文字列を 入力 に入力し、出力 をコピーします。
例
0a#b.c
\30 a\#b\.c
CSS エスケープを使うべき場面
id やクラスが数字で始まる場合や、.、:、#、スペースなどの文字を含む場合は、必ず識別子モードを使ってください。たとえば document.querySelector("#" + CSS.escape(id)) です。content: の値やフォント名には文字列モードを使います。CSS の検証やミニファイは行いません。
CSS エスケープの仕組み
識別子モードは CSSOM §2.1 に従います。NUL は U+FFFD になり、制御文字、先頭の数字、先頭のハイフンの後の数字は \HEX のコードポイントのエスケープになり、単独の - は \- になり、英字、数字、-、_、非 ASCII 文字はそのまま残り、それ以外の ASCII 文字にはバックスラッシュが付きます（# → \#）。文字列モードでは、\、"、' がバックスラッシュでエスケープされ、制御文字（改行を含む）は \HEX になります。アンエスケープでは、\ と 1〜6 桁の 16 進数、省略可能な空白 1 つを読み取り、エスケープされた改行を取り除き、それ以外のエスケープされた文字はそのまま残します。
一般的な使用例
- id が数字で始まる要素を選択する（
#\31 23） - ユーザーが作成したクラス名からセレクターを組み立てる
-
content:の文字列に特殊文字を書く - ツールが生成したエスケープ済みのセレクターを読む
よくある質問
先頭の数字が \3X になるのはなぜですか？
CSS の識別子は数字で始められないため、数字はコードポイントで書かれ（1 = \31）、エスケープを終わらせるスペースが続きます。
ブラウザーの CSS.escape() と同じですか？
はい。識別子モードは同じ仕様を実装しており、出力も同一です。
非 ASCII 文字をエスケープする必要はありますか？
いいえ。UTF-8 の CSS ファイルにはそのまま含められます。このオプションは、ASCII のみのスタイルシート向けです。