web-dev-qa-db-ja.com

CSSを使って特定の子を取得するにはどうすればよいですか。

tablename__が動的に作成されるtdname__があります。私は最初と最後の子供を得る方法を知っているが、私の質問は：

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

htmlcsscss3css-selectors
267
Satch3000

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

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

395
BoltClock

IE 7＆8（およびCSS 6をサポートしていない他のブラウザ（IE 6を含まない））では、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*/ }
230
Tim