web-dev-qa-db-ja.com

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

CSSクラスセレクタ内で許可されている文字/記号は何ですか？私は以下の文字が invalid であることを知っていますが、どの文字が valid ですか？

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

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

基本的に 1名前は、アンダースコア（_）、ハイフン（-）、または英字（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のように、通常ブラウザ固有の拡張子用に予約されています。

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

2 私がリンクした文法によれば、2つのハイフンで始まる規則、例えば--indent1は無効です。しかし、実際にこれを見たことがあると確信しています。

972
Triptych

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

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

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

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

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

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

159
Robert Siemer

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がTriptychの答えで指摘しているように、これも 警告 と同じWebページにあります。

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準拠のパーサーを使用できるはずです。

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

66
Jason S

私はあなたの質問にここで詳しく答えました： 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>
62
Mathias Bynens

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

-?(?:[_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を使ってそれらをエンコードすることができます。

23
Gumbo

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

.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クラスを有効にするための回避策はありますか？
7
D.Tate

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

5
Marius

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

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

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

上でリンクされた記事は決してそれらを使用しないと言って、それからそれらをサポートしないブラウザのリストを与えます、それらのすべては、少なくともユーザの数の観点からは、冗長なものです。

4
mofaha