CSSの擬似クラス:nth-childで実現できないパターン

疑似クラスの:nth-childはCSSだけで、特定の順番の要素にスタイルを当てる時に非常に便利ですが、挙動が難しく、複雑なことをしようとするとスタイルが当たらない可能性があります。

今回はそんな:nth-childで実現できないパターンのメモです。これから紹介するようなパターンは、ある程度構造を考えておくか、CSSだけでなくJavaScriptも使用するようにしましょう。

display:none;を除外して指定

table等で行の色を交互に変更したい時なんかがよくあると思います。
nth-childでeven・odd（または2n・2n-1）を指定すると、偶数行・奇数行にスタイルを当てられます。

ただし、何らかの理由で1行だけdisplay:none;で非表示にすると、1箇所だけ連続で同じスタイルが当たってしまいます。

display:none;の要素も含めて交互に色が変わっているので、これは仕方なさそうです。
もし、要素が不要なのであれば、JavaScriptなどで要素ごと消してあげる必要が出てきます。

特定classのみで番号指定

.itemがついているclassの中から3番目のスタイルを適応みたいなことをしたい時、他の要素があるとうまくいきません。

どうやら:nth-childはタグの識別のみ行っているようで、classでの絞り込みはうまくできないようです。

また、別のタグでマークアップしているのであれば、:nth-of-typeでの指定は可能です。