CSSを使用して特定の数の子を取得するにはどうすればよいですか？

私が持っているtableそのtdsの動的に作成されています。最初と最後の子を取得する方法は知っていますが、私の質問は次のとおりです。

CSSを使用して2番目または3番目の子を取得する方法はありますか？

最新のブラウザでtd:nth-child(2)は、2番目tdとtd:nth-child(3)3番目のブラウザに使用します。これらtd はすべての行の 2番目と3番目を取得することに注意してください。

バージョン9より前のIEとの互換性が必要な場合は、Timの提案に従って兄弟コンビネーターまたはJavaScriptを使用してください。彼の方法の説明と図については、この関連する質問に対する私の回答も参照してください。

IE 7および8（およびIE6を含まないCSS3サポートのない他のブラウザー）の場合、次を使用して2番目と3番目の子を取得できます。

2番目の子：

td:first-child + td

3番目の子：

td:first-child + td + td

次に+ td、選択する子ごとに別の子を追加します。

IE6もサポートしたい場合は、それも可能です！小さなJavaScript（この例ではjQuery）を使用するだけです。

$(function() {
    $('td:first-child').addClass("firstChild");
    $(".table-class tr").each(function() {
        $(this).find('td:eq(1)').addClass("secondChild");
        $(this).find('td:eq(2)').addClass("thirdChild");
    });
});

次に、CSSでこれらのクラスセレクターを使用して、好きな変更を加えます。

table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }