子要素のセットに An+B ロジックを適用する前に、事前にフィルタする。
:nth-child() 疑似クラス セレクタと :nth-last-child() 疑似クラス セレクタ
:nth-child() 疑似クラス セレクタを使用すると、インデックスで DOM 内の要素を選択できます。An+B マイクロ構文を使用すると、選択する要素を細かく制御できます。
:nth-child(2): 2 人目のお子様を選択します。:nth-child(2n): すべての子（2 番目、4 番目、6 番目、8 番目など）を選択します。:nth-child(2n+1): すべての奇数の子（1 番目、3 番目、5 番目、7 番目など）を選択します。:nth-child(5n+1): 1 番目の (=(5×0)+1)、6 番目の (=(5×1)+1)、11 番目の (=(5×2)+1)、... 子を選択します。:nth-child(5n+2): 2 番目の (=(5×0)+2)、7 番目の (=(5×1)+2)、12 番目の (=(5×2)+2)、... 子を選択します。
ただし、A パラメータを省略すると、より多くのクリエイティブを選択できます。例:
:nth-child(n+3): 3 番目（3 番目、4 番目、5 番目など）からすべての子を選択します。:nth-child(-n+5): 5 番目までのすべての子を選択します（1 番目、2 番目、3 番目、4 番目、5 番目）。
次の :nth-child() 個を組み合わせると、要素の範囲を選択できます。
:nth-child(n+3):nth-child(-n+5): 3 番目から 5 番目までのすべての子（3 番目、4 番目、5 番目）を選択します。
:nth-last-child() を使用して同様の選択を行うこともできますが、最初から数え始めるのではなく、最後までカウントします。
of S 構文で選択内容を事前にフィルタリングする
CSS セレクタ レベル 4 では、必要に応じてセレクタリストを :nth-child() と :nth-last-child() に渡すことができるようになりました。
:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)
of S が指定された場合、An+B ロジックは、指定されたセレクタ リスト S に一致する要素にのみ適用されます。つまり、An+B が処理する前に子を事前にフィルタできます。
対応ブラウザ
- 111
- 111
- 113
- 9
例
たとえば、:nth-child(2 of .highlight) と指定すると、.highlight クラスを持つ 2 番目の一致する要素が選択されます。言い換えれば、.highlight クラスを持つすべての子から 2 人目を選択します。
これは、クラス .highlight を持ち、かつ 2 番目の子でもある要素を選択する .highlight:nth-child(2) とは対照的です。
以下のデモでは、この違いを確認できます。
:nth-child(2 of .highlight)に一致する要素の枠線はピンク色です。.highlight:nth-child(2)に一致する要素には緑色の枠線が表示されます。
S はセレクタ リストであり、複数のセレクタをカンマで区切って受け入れます。たとえば、:nth-child(4 of .highlight, .sale) と記述すると、兄弟要素のセットから 4 番目の要素（.highlight または .sale）が選択されます。
以下のデモでは、:nth-child(4 of .highlight, .sale) に一致する要素にオレンジ色の枠線が適用されています。
ゼブラストライプの再現
:nth-child() を使用する典型的な例は、ゼブラ ストライプ テーブルを作成する場合です。表の各行の色を視覚的に変えることで、通常は、次のように対応します。
tr:nth-child(even) {
background-color: lightgrey;
}
これは静的テーブルでは問題ありませんが、テーブル コンテンツを動的にフィルタし始めると問題が生じます。たとえば、行 2 が非表示になると、行 1 と行 3 が表示され、それぞれ同じ背景色が使用されます。
これを解決するには、An+B ロジックから隠し行を除外して、:nth-child(An+B [of S]?) を活用します。
tr:nth-child(even of :not([hidden])) {
background-color: lightgrey;
}
。
写真撮影: Markus Spiske（出典: Unsplash）