[解決済み] HTMLのid属性に有効な値は何ですか？

質問

を作成する際に id 属性の値にはどのような規則がありますか？

どのように解決するのですか？

対象 HTML 4 というのは、技術的な答えです。

IDおよびNAMEトークンは文字（[A-Za-z]）で始まり、任意の数の文字、数字（[0-9]）、ハイフン（ "-" ）、アンダースコア（ "_" ）、コロン（ ":" ）、ピリオド（ "." ）が続くことができます。

HTML 5 はさらに寛容で、idは少なくとも1つの文字を含まなければならず、いかなるスペース文字も含んではならない、とだけ述べています。

の場合、id属性は大文字と小文字を区別します。 XHTML .

純粋に実用的な問題として、特定の文字を避けたい場合があります。ピリオド、コロン、'#' は CSS セレクタでは特別な意味を持つので、これらの文字をエスケープするには CSSのバックスラッシュ またはダブルバックスラッシュで jQuery に渡されるセレクタ文字列 . IDにピリオドやコロンを使う前に、スタイルシートやコードでどれくらいの頻度で文字をエスケープしなければならないか考えてみてください。

例えば、HTMLの宣言である <div id="first.name"></div> は有効です。その要素をCSSで選択すると #first\.name で、jQueryではこのようになります。 $('#first\\.name'). しかし、バックスラッシュを忘れると $('#first.name') を持つ要素を探す、完全に有効なセレクタができあがります。 first を持ち、かつクラス name . これは見過ごしがちなバグです。長い目で見れば、idを選択する方が幸せかもしれません。 first-name (ピリオドではなくハイフン）。

命名規則を厳密に守ることで、開発作業を簡略化することができます。例えば、小文字に限定して、単語をハイフンかアンダースコアで区切る（ただし両方ではなく、どちらかを選んでもう一方は使わない）と、覚えやすいパターンになります。そうすれば、「あれは何だったんだろう？ firstName または FirstName と入力する必要があることが常にわかるからです。 first_name . キャメルケースがお好きですか？ハイフンやアンダースコアは使用せず、最初の文字は常に大文字か小文字のどちらかを使用し、混在させないようにします。

今では非常に不明瞭な問題ですが、少なくとも1つのブラウザ、Netscape 6, は、id 属性の値を大文字と小文字の区別があるものとして誤って扱いました。 . つまり、もしあなたが id="firstName" をHTMLに入力し（小文字の'f'）、かつ #FirstName { color: red } をCSS（大文字の'F'）で指定した場合、そのバギーブラウザーは要素の色を赤に設定することに失敗していたはずです。この編集の時点（2015年4月）では、Netscape 6への対応を求められていないことを祈ります。これは歴史的な脚注とお考えください。