: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

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた