LoginSignup
1
0

More than 3 years have passed since last update.

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

Last updated at Posted 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への対応が減っていくかもしれませんが、もしお役に立てればと思います。

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0