【IE11】先頭にハイフン2つのclass名はCSSが効かない

Last updated at 2020-06-03Posted at 2020-06-02

表題の通りです。

class名の先頭にハイフンはひとつまで。
マルチクラスでハイフン2つ指定すると、モダンブラウザでは指定どおり表示されますが、
IEでは無効なので、ご注意ください。

##NG class名🙅

先頭にハイフン2つですと、IEでCSSが効きません。

css

<div class="hoge --fuga">

##OK class名🙆🏻‍♂️

先頭にアンダースコア（_）、ハイフン1つ（-）ですとIEでバッチリCSSが効きます。

css

<div class="hoge -fuga">

<div class="hoge _fuga">

##CSS仕様について

W3CによるとIEの動作の方が正しいようでした。知らなかったです。

識別子は、数字、2つのハイフン、ハイフンの直後の数字で開始できない。