web-dev-qa-db-ja.com

CSSでテーブルの最初の「tr」を除くすべての「tr」要素を選択します

CSSを使用してテーブルの最初のtrを除くすべてのtr要素を選択するにはどうすればよいですか？

私はこの方法を試してみましたが、うまくいかないことがわかりました：

http://www.daniel-lemire.com/blog/archives/2008/08/22/how-to-select-even-or-odd-rows-in-a-table-using-css- 3 /

htmlcsshtml-tablecss-selectors
236
Steven Spielberg

最初のtrまたは後続のtrsにクラスを追加します。 CSSだけで目的の行を選択するクロスブラウザの方法はありません。

ただし、Internet Explorer 6、7、または8を気にしない場合：

tr:not(:first-child) {
    color: red;
}
426
Magnar

IE7以降でサポートされている兄弟コンビネータの使用について誰も言及していないことに驚いています。

tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */

これらは両方とも（とにかくHTMLテーブルのコンテキストで）まったく同じように機能します。

tr:not(:first-child)
221
BoltClock

理想的なソリューションですが、IEではサポートされていません

tr:not(:first-child) {css}

2番目の解決策は、すべてのtrをスタイルし、最初の子のcssでオーバーライドすることです。

tr {css}
tr:first-child {override css above}
26
Mark Steggles

あなたが話している「最初の行」はあなたのテーブルヘッダーのように聞こえます-したがって、実際にはマークアップでtheadとtbodyを使用することを考える必要があります（ ここをクリック ） （意味的に正しい、スクリーンリーダーのようなものに便利）、CSS選択（table thead ... { ... }）のためのより簡単でクロスブラウザに優しい可能性

10
oezi

質問にはすでに適切な答えがありますが、:first-childタグが子を表す項目タイプに適用されることを強調したいと思います。

たとえば、コードでは：

<div id"someDiv">
     <input id="someInput1" /> 
     <input id="someInput2" />
     <input id="someInput2" />
</div

最初のマージンではなく、マージンを持つ次の2つのエレメントのみに影響を与えたい場合は、次のようにします。

#someDiv > input {
     margin-top: 20px;
}
#someDiv > input:first-child{
     margin-top: 0px;
}

つまり、inputsは子であるため、セレクターの入力部分にfirst-childを配置します。

2
CodyBugstein

別のオプション：

tr:nth-child(n + 2) {
    /* properties */
}
1
Arman Yeghiazaryan

申し訳ありませんが、これは古いことですが、最初以外のすべてのtr要素をスタイルし、すべてのtr要素に対して指定したものを取り消すpsuedoクラス：first-childを使用してください。

この例で説明する方が良い：

http://jsfiddle.net/DWTr7/1/

tr {
    border-top: 1px solid;
}
tr:first-child {
    border-top: none;   
}

/パトリック

1
Patrik

tr:not(:first-child)はIE 6、7、8ではサポートされていないため、jQueryのヘルプを使用できます。あなたはそれを見つけるかもしれません ここ

0
Tapos