class名の頭がハイフン2つの場合にIEで効かない

「--hoge」のように、ハイフン2つから始まるclass名を指定した際、IE11だけその指定が効かないことがあったのでメモ。

サンプルコード

やりたかったことは、BEMでいうModifierのように別パターンを作るというものです。

<section class="section --kansai">
	<h2>VR関西圏立高校</h2>
</section>
<section class="section --sharpness">
	<h2>聖シャープネス学院</h2>
</section>
<section class="section --nijisanji">
	<h2>にじさんじ高校</h2>
</section>
<section class="section --ryusei">
	<h2>横須賀流星高校</h2>
</section>
<section class="section --nougyou">
	<h2>にじさんじ農業高校</h2>
</section>
<section class="section --helesta">
	<h2>王立ヘルエスタ高校</h2>
</section>

CSSは.sectionと該当のclass名を連結して記述します。

.section {
	padding: 30px;
	color: #fff;
	background: #999;
}
.section.--kansai {
	background: #FBAF71;
}
.section.--sharpness {
	background: #A590AF;
}
.section.--nijisanji {
	background: #F1C8DE;
}
.section.--ryusei {
	background: #B6C6F2;
}
.section.--nougyou {
	background: #AFC9A4;
}
.section.--helesta {
	background: #42FFFF;
}

これで問題ないかと思ったのですが、IEだけ背景色が#999となっていました。
うまくいかなかった場合のデモページ

ハイフンを2つから1つに変更すると、IEでも同じ表示になりました。

<section class="section -kansai">
	<h2>VR関西圏立高校</h2>
</section>
<section class="section -sharpness">
	<h2>聖シャープネス学院</h2>
</section>
<section class="section -nijisanji">
	<h2>にじさんじ高校</h2>
</section>
<section class="section -ryusei">
	<h2>横須賀流星高校</h2>
</section>
<section class="section -nougyou">
	<h2>にじさんじ農業高校</h2>
</section>
<section class="section -helesta">
	<h2>王立ヘルエスタ高校</h2>
</section>

.section {
	padding: 30px;
	color: #fff;
	background: #999;
}
.section.-kansai {
	background: #FBAF71;
}
.section.-sharpness {
	background: #A590AF;
}
.section.-nijisanji {
	background: #F1C8DE;
}
.section.-ryusei {
	background: #B6C6F2;
}
.section.-nougyou {
	background: #AFC9A4;
}
.section.-helesta {
	background: #42FFFF;
}

対応後のデモページ