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

Shunsuke Sawada

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

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番目なのです。
知らなかったよ。
  

参考

http://stackoverflow.com/questions/12356158/css-nth-of-type-and-not-selector

10
Shunsuke Sawada

おすすめの記事

Datepicker for Bootstrapで指定日を無効にする
2
[もっとみる...] / [See more...] をjQueryで実装する(開閉できるタイプ)
CakePHP 2.x JSヘルパーでajax通信(ajax helperは使わない)
20