:nth-of-typeと:notの組み合わせはうまくいかない
いろいろ悩んだけど、結局できないことがわかった。
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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番目なのです。
知らなかったよ。
- list1
- list2
- list3
- list4 blueになってもらいたいところ
- list5 :not(.red)をつかってもやっぱり5番目
- list6
- list7
- list8
- list9
- list10
参考
http://stackoverflow.com/questions/12356158/css-nth-of-type-and-not-selector