【IE11】先頭にハイフン2つのclass名でもIEで動作させたい

Last updated at 2020-12-14Posted at 2020-12-14

概要

きっかけはこちらの方の投稿です。

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

IEでは、ハイフン2つから始まるclass名はCSSが効きません。

css

.--hoge { /* IEでは効かない */
    color: #f00;
}

将来的にハイフン2つから始まるclass名は許容される可能性があるようですが、
どうしても今IEで動作させたい場合のハックになります。

セレクタの前方一致、後方一致、部分一致を使うことでIEでも動作させることが可能なようです。
モダンブラウザでも動作します。

css

[class^="--hoge"] { /* 前方一致 */
    color: #f00;
}

css

[class$="--hoge"] { /* 後方一致 */
    color: #f00;
}

css

[class*="--hoge"] { /* 部分一致 */
    color: #f00;
}

前方一致、後方一致、部分一致のセレクタはIE7から利用できるようになっており、IE11でも動作します。
今後IEへの対応が減っていくかもしれませんが、もしお役に立てればと思います。

また、きっかけとなった方の投稿のコメント欄にあるとおり、連続するハイフン始まりは勧告候補となっており、今後許容されることになる可能性が高いです。
が、現在正式な仕様にはなっていないためご利用は計画的に。