CSSクラス名/セレクターで有効な文字はどれですか？

CSSクラスセレクター内で使用できる文字/記号は何ですか？
次の文字は無効ですが、どの文字が有効ですか？

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

CSS文法で直接確認できます。

基本的に¹、名前は下線（_）、ハイフン（-）、または文字（a– z）で始まり、その後に任意の数のハイフン、下線、文字、または数字が続く必要があります。キャッチがあります：最初の文字がハイフンである場合は、2番目の文字はしなければならない^2は、文字またはアンダースコアであること、および名前が長い、少なくとも2文字でなければなりません。

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

つまり、前述のルールは、W3C仕様から抽出された次のようになります。：

CSSでは、識別子（要素名、クラス、セレクターのIDを含む）に含めることができるのは、文字[a-z0-9]とISO 10646文字U + 00A1以上、さらにハイフン（-）とアンダースコア（_）だけです。 ; 数字で始めたり、ハイフンの後に数字を続けたりすることはできません。識別子には、エスケープ文字とISO 10646文字を数値コードとして含めることもできます（次の項目を参照）。たとえば、識別子「B＆W？」「B \＆W \？」と書くことができます または「B \ 26 W \ 3F」。

ハイフンまたはアンダースコアで始まる識別子は、通常、ブラウザ固有の拡張機能用に予約されてい-moz-opacityます。

¹エスケープされたUnicode文字（実際には誰も使用しない）を含めることで、すべてが少し複雑になっています。

²リンクした文法によれば、^2つのハイフンで始まるルール--indent1は無効であることに注意してください。しかし、実際にこれを見たことがあると思います。

驚いたことに、ここでのほとんどの答えは間違っています。次のことがわかります。

CSSでは、CSSクラス名にNUL以外の文字を使用できます。（CSSにNUL（エスケープされているかどうかに関係なく）が含まれている場合、結果は未定義です。[ CSS-characters ]）

Mathias Bynensの回答は、これらの名前の使用方法を示す説明とデモへのリンクです。ダウン書かれた CSSコードでは、クラス名はエスケープが必要な場合があり、それは、クラス名を変更しません。たとえば、不必要に過剰にエスケープされた表現は、その名前の他の表現とは異なって見えますが、それでも同じクラス名を参照しています。

他のほとんどの（プログラミング）言語には、変数名（「識別子」）をエスケープするという概念がないため、変数のすべての表現が同じに見える必要があります。これはCSSでは当てはまりません。

HTMLでは、クラス名属性にスペース文字（スペース、タブ、ラインフィード、フォームフィード、およびキャリッジリターン）を含める方法がないことに注意してください。これらは、すでにクラスを互いに分離しているためです。

したがって、ランダムな文字列をCSSクラス名に変換する必要がある場合は、NULとスペースに注意してエスケープします（したがって、CSSまたはHTMLの場合）。できました。

私はここであなたの質問に詳細に答えました：http : //mathiasbynens.be/notes/css-escapes

この記事では、CSS（およびJavaScript）で任意の文字をエスケープする方法についても説明しています。また、このための便利なツールも作成しました。そのページから：

要素にID値を指定する~!@$%^&*()_+-=,./';:"?><[]{}|`#場合、セレクターは次のようになります。

CSS：

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript：

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

W3C仕様を読んでください。（これはCSS 2.1です。ブラウザーの想定に適したバージョンを見つけてください）

編集：関連する段落が続きます：

CSSでは、識別子（要素名、クラス、セレクターのIDを含む）に含めることができるのは、文字[a-z0-9]とISO 10646文字U + 00A1以上、さらにハイフン（-）とアンダースコア（_）だけです。 ; 数字で始めたり、ハイフンの後に数字を続けたりすることはできません。識別子には、エスケープ文字とISO 10646文字を数値コードとして含めることもできます（次の項目を参照）。たとえば、識別子「B＆W？」「B \＆W \？」と書くことができます または「B \ 26 W \ 3F」。

編集2：@mipadiがトリプティクの答えで指摘しているように、同じ警告がこのウェブページにもあります：

CSSでは、識別子は「-」（ダッシュ）または「_」（アンダースコア）で始まる場合があります。'-'または '_'で始まるキーワードおよびプロパティ名は、ベンダー固有の拡張用に予約されています。このようなベンダー固有の拡張機能は、次のいずれかの形式である必要があります。

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

例：

たとえば、XYZ組織がディスプレイの東側の境界線の色を説明するプロパティを追加した場合、それらは-xyz-border-east-colorと呼ばれることがあります。

その他の既知の例：

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

最初のダッシュまたはアンダースコアは、CSSの現在または将来のレベルでは、プロパティまたはキーワードで使用されないことが保証されています。したがって、典型的なCSS実装はそのようなプロパティを認識せず、解析エラーの処理規則に従ってそれらを無視する場合があります。ただし、最初のダッシュまたはアンダースコアは文法の一部であるため、CSS 2.1の実装者は、ベンダー固有の拡張機能をサポートしているかどうかにかかわらず、常にCSS準拠のパーサーを使用できる必要があります。

著者はベンダー固有の拡張を避けるべきです

完全な正規表現は次のとおりです。

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

したがって、「-」と「_」以外のリストされた文字はすべて、直接使用すると許可されません。ただし、バックスラッシュfoo\~barまたはUnicode表記を使用してエンコードできますfoo\7E bar。

回避策を探している人のために、たとえば、クラスが数値で始まる場合は、属性セレクターを使用できます。変化する：

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

これに：

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

また、クラスが複数ある場合は、セレクターで指定する必要があると思います。

出典：

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. 数字で始まる名前のCSSクラスを有効にする回避策はありますか？

私の理解では、アンダースコアは技術的に有効です。チェックアウト：

https://developer.mozilla.org/en/underscores_in_class_and_id_names

「... 2001年初頭に公開された仕様の正誤表は、初めてアンダースコアを合法にした」と語った。

上記のリンクされた記事は、それらを使用しないことを示しており、それらをサポートしていないブラウザーのリストを提供します。

HTML5 / CSS3の場合、クラスとIDは数字で始めることができます。

@Triptychの答えから離れて、次の2つの正規表現一致を使用して文字列を有効にすることができます。

[^a-z0-9A-Z_-]

これは、簡単に削除できるように、文字、数字、ダッシュ、アンダースコア以外のものを選択する逆一致です。

^-*[0-9]+

これは、文字列の先頭にある0個または1個のダッシュとそれに続く1個以上の数字に一致し、簡単に削除することもできます。

PHPでの使用方法：

//Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);
//Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);
//Make sure the string is 2 or more characters long
return 2 <= strlen($class) ? $class : '';