「:nth-child(exp)」フィルタを利用することで、条件に合致した親要素(群)の中から特定の子要素を取り出すことができます。この:nth-childフィルタはなかなか高機能なフィルタで、odd(偶数)/even(奇数)、インデックス番号のような指定ができるほか、式を指定することでn行おきのような指定も表現できます。以下、それぞれの指定による結果の変化を確認します。(1):nth-childフィルタにより偶数/奇数番目の子要素を取得する以下は、odd(奇数)番目、even(偶数)番目の子要素に対して、背景色(ライムと黄色)を指定する例です。前述の:odd、:evenフィルタとも似ていますが、2つの点で異なります。1つに、:odd、:evenフィルタのインデックス番号は0始まりですが、:nth-childフィルタのインデックス番号は1始まりであるという点、もう1つは、:odd/:evenフィルタは「要素セット全体」からその奇数/偶数要素を取り出しますが、:nth-childフィルタは「親要素を基点に」それぞれの先頭末尾要素を取り出すという点です。後者の関係は、前述の:first/:lastフィルタと:first-child/:last-childフィルタのそれと同様といえます。(2):nth-childフィルタにより指定インデックスの子要素を取得する次に、親要素に対して3番目の子要素に対して、背景色を指定してみましょう。:nth-childフィルタにより指定インデックスの子要素を取得(NthChild2.html)このHTMLを実際にブラウザで開くブラウザで開くリスト016の実行結果:eqフィルタと似ていますが、先ほどの:odd/:evenフィルタと同じく、インデックス番号や基点となる要素が異なりますので要注意です。(3):nth-childフィルタによりn行おきに子要素を取得する任意の式を指定することで、n行おきに子要素を取得することもできます。2、5、8行目......のように3行おきに(「3で割ったときの余りが2」番目の)要素を取得したい場合には、以下のように記述できます。2」)に、n=0、1、2、......と当てはめていったときの値がインデックス値として採用されるわけです。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。