:nth-of-typeと:notの組み合わせはうまくいかない

---

ブログを更新しました。元の記事はコチラ

---

いろいろ悩んだけど、結局できないことがわかった。

<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番目なのです。
知らなかったよ。
　　
###参考
http://stackoverflow.com/questions/12356158/css-nth-of-type-and-not-selector

###デモはこちら
→ http://workabroad.jp/posts/2106