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

URL: https://webrandum.net/css-nth-child-impossible-pattern/
公開日: 2019-04-14
更新日: 2019-04-12
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

疑似クラスの`: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`での指定は可能です。