最初のものを除くすべての「tr」を選択します


257

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

この方法を試しましたが、うまくいきませんでした。


1
これはどのブラウザに対応する必要がありますか?
Pekka


@Pekkaの質問は重要です。これは、IEのさまざまなバージョンで動作する標準のCSSを使用してこれを行う方法を考えることができないためです。IEをサポートする必要がある場合、実行可能な唯一のソリューションは、最初の<tr>クラスのクラスと残りのクラスの別のクラスです。
Spudley

IEについては心配していませんが、FFとGCで動作します

回答:


466

最初trまたは後続trののいずれかにクラスを追加する。CSSだけで必要な行を選択するクロスブラウザーの方法はありません。

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

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

18
tr:not(:first-of-type)最初の一般化された子ではなく、特定のセレクターの最初のインスタンスを探している場合は、潜在的な解決策としても指摘したいと思います。
ジョシュアバーンズ

2
2019年にIEは終了したと思います(IE6からIE10のユーザーの0.5%未満
Webwoman

227

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

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

これらはどちらも(HTMLテーブルのコンテキストでは)まったく同じように機能します。

tr:not(:first-child)

1
待って...これはどのように受け入れられる答えでしょうか?その文から「すべてを除いてすべて」を取得することはできません。これはOPが求めていることです。tr + trは単一の要素を取得します。
tr〜trで

5
@hairbo:tr + trは、別のtrの直後に続くtrを取得します。3つの行を持つテーブルがある場合、3番目の行は2番目の行のすぐ後に続くため、これも一致します。代わりにtr:first-child + trを使用する場合、単一の要素のみを取得します。+と〜の唯一の違いは、〜が前述の2つの間に他の要素をいくつでも許可することです。
BoltClock

追加しelem + elemたいのは、対象とする要素が唯一の子ではない場合の優れた一般的なソリューションです。たとえば、aの<h2>後に複数の<p>タグが続く場合、その場合、最初のタグ<p>は最初の子ではありません。
DisgruntledGoat

27

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

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

2番目の解決策は、すべてのtrをスタイルしてから、first-childのcssでオーバーライドすることです。

tr {css}
tr:first-child {override css above}

10

あなたが話をしている「最初の行」のような音があなたのテーブルヘッダーです-あなたが本当に使用して考える必要がありますので、theadtbody(自分のマークアップにはこちらをクリックし「より良い」マークアップにつながることになる)スクリーンリーダーのようなもののために(意味的に正しい便利)およびcss-selection(table thead ... { ... })のためのより簡単で、ブラウザーにやさしい可能性


3

質問にはすでに適切な回答がありますが、:first-childタグが子供を表すアイテムタイプになっていることを強調したいだけです。

たとえば、コードでは:

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

最初の要素ではなく、2番目の2つの要素のみに影響を与えたい場合は、次のようにします。

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

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


1

申し訳ありませんが、これは古いことを知っていますが、なぜすべてのtr要素に最初のスタイル以外のすべてのスタイルを設定し、すべてのtr要素に対して指定した内容を取り消す疑似クラス:first-childを使用しないのですか?

この例でよりよく説明されています:

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

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

/ Patrik


1

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




-1

次のように、CSSで疑似クラスセレクタを使用することもできます。

.desc:not(:first-child) {
    display: none;
}

これは、クラスが.descの最初の要素に適用されません。

ここでは一例でJSFiddleです:http://jsfiddle.net/YYTFT/が、これは疑似クラスセレクタを説明するための良い情報源です。http://css-tricks.com/pseudo-class-selectors/


1
これは、最初の要素であるポイントにスタイルを適用しません。first-childクラスを無視します。
Fez Vrasta

-3

クラスを作成し、CSSによって選択される(または望まない)将来のすべてを定義するときにクラスを使用できます。

これは書くことによって行われます

<tr class="unselected">

そしてあなたのCSSで行を持っています(そして例としてtext-alignコマンドを使用しています):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}

2
回答する前に質問を理解してください
Ammar Bozorgvar 2012年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.