質問: 表題の通りなのですが、CSSのclass名で、「class="--first"」といったハイフンから始まる名前にした場合、IEではclass名として認識されず、スタイルが適用されないという現象が起こりました。class名として認識されていないというのは、デベロッパーツールで確認できました。 ChromeやFirefoxをはじめとしたモダンブラウザでは問題なく表示され、Edgeの場合はVirtualBoxの仮想環境においてはIEと同じくclass名として認識されない現象が起こりました。 最初は原因がわからなかったのですが、下記のように変更したところ解消されたので現状、問題は解決しています、、 ``` // class名として認識されない .--first { margin: 15px auto; } // class名として認識される .__first { margin: 15px auto; } ``` class名において、数字が先頭に来るものは使えないなどは知っていたのですが、このようなケースは知りませんでした。 そもそもハイフン始まりは命名規則として使えないものなのか、また、たまたま解決しただけで他に原因があるのか、あるいはIEのブラウザの仕様なのか、とよくわからずモヤモヤしております。 いろいろ調べたのですが、それに近い情報が見つからなかったので、もし詳しくご存知の方がいれば教えていただけますと幸いです。 宜しくお願いいたします。
回答: think49さんのまとめたこの記事が詳しいです。(仕様へのリンクもあります) 【[HTML, CSS, JavaScript] id名/class名に使用できる文字の種類 · GitHub】 > > まとめると次のようになります。 > > > 1. 文字[a-zA-Z0-9]およびISO 10646のU+0080以上の文字、さらにハイフン(-)およびアンダースコア(_)のみを含むことができる > 2. 数字([0-9])、2つのハイフン(--)、ハイフンの直後の数字(-[0-9])で開始できない > 3. バックスラッシュ(\)で文字をエスケープできる(例: \- は - を表す) > 4. Unicodeエスケープシーケンスを利用できる(例: \\0030 は 0 を表す) > > >