ブログを更新しました。元の記事はコチラ
いろいろ悩んだけど、結局できないことがわかった。
<!-- extract -->
<style>
#selector-test .red {
background-color: red;
}
#selector-test li:not(.red):nth-of-type(2n+1) {
background-color: blue;
}
#selector-test li:not(.red):nth-of-type(5) {
background-color: yellow;
}
</style>
<ul id="selector-test">
<li>list1</li>
<li>list2</li>
<li class="red">list3</li>
<li>list4 blueなはず</li>
<li>list5</li>
<li>list6</li>
<li>list7</li>
<li>list8</li>
<li>list9</li>
<li>list10</li>
</ul>
notはnth-of-typeに対して何もしないんだ。
nth-of-typeの対象にカウントされないと思っていたけど、しっかりカウントされてます。
list3に「.redクラスがついていてるからlist4が3番目（奇数）になるはずだ」と思ってもそうなりません。
その証拠に、:not(.red).nth-of-type(5)はやっぱり5番目なのです。
知らなかったよ。