Wählen Sie alle 'tr' außer dem ersten

257

Wie kann ich alle trElemente außer dem ersten trin einer Tabelle mit CSS auswählen ?

Ich habe versucht, diese Methode zu verwenden, aber festgestellt, dass sie nicht funktioniert hat.

Alexander Abakumov
quelle
1
Mit welchen Browsern muss dies kompatibel sein?
Pekka
@ Pekkas Frage ist wichtig, da ich mir keine Möglichkeit vorstellen kann, dies mit Standard-CSS zu tun, das mit verschiedenen Versionen von IE funktioniert. Wenn Sie IE unterstützen müssen, ist die einzige praktikable Lösung eine Klasse für die erste <tr>und eine andere Klasse für den Rest von ihnen.
Spudley
Ich mache mir keine Sorgen um IE, aber es wird in FF und GC funktionieren

Antworten:

466

Durch Hinzufügen einer Klasse entweder zum ersten troder zum nachfolgenden trs. Es gibt keine Crossbrowser-Methode, um die gewünschten Zeilen nur mit CSS auszuwählen.

Wenn Sie sich jedoch nicht für Internet Explorer 6, 7 oder 8 interessieren:

tr:not(:first-child) {
    color: red;
}
Magnar
quelle
18
Ich möchte auch auf tr:not(:first-of-type)eine mögliche Lösung hinweisen , wenn Sie eher nach der ersten Instanz eines bestimmten Selektors als nach dem ersten verallgemeinerten Kind suchen.
Joshua Burns
2
Ich denke, im Jahr 2019 sind wir mit IE fertig (weniger als 0,5% der Benutzer von IE6 bis IE10
Webwoman
227

Ich bin überrascht, dass niemand die Verwendung von Geschwisterkombinatoren erwähnt hat, die von IE7 und höher unterstützt werden:

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

Beide funktionieren genauso (sowieso im Kontext von HTML-Tabellen) wie:

tr:not(:first-child)
BoltClock
quelle
1
Warten Sie ... wie sollte dies die akzeptierte Antwort sein? Sie können aus dieser Aussage nicht "alles außer zuerst" erhalten, was OP verlangt. Mit tr + tr erhalten Sie ein einzelnes Element. Ich denke, tr ~ tr wird euch alle kriegen (ich denke so etwas wie Eltern: Erstes Kind ~ tr), aber nicht syntaktisch so lesbar wie nicht:
hairbo
5
@hairbo: tr + tr bringt dir jedes tr, das direkt einem anderen tr folgt. Wenn Sie eine Tabelle mit drei Zeilen haben, folgt die dritte Zeile direkt der zweiten Zeile, sodass sie auch übereinstimmt. Sie erhalten nur ein einziges Element, wenn Sie stattdessen tr: first-child + tr verwenden. Der einzige Unterschied zwischen + und ~ besteht darin, dass ~ eine beliebige Anzahl anderer Elemente zwischen den beiden genannten zulässt.
BoltClock
Ich wollte nur hinzufügen, elem + elemist eine großartige allgemeine Lösung, wenn die Elemente, auf die Sie abzielen möchten, nicht die einzigen untergeordneten Elemente sind. Wenn auf a beispielsweise <h2>mehrere <p>Tags folgen , <p>ist das erste in diesem Fall nicht das erste Kind.
DisgruntledGoat
27

ideale Lösung, aber im IE nicht unterstützt

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

Die zweite Lösung wäre, alle trs zu formatieren und dann mit css für das erste Kind zu überschreiben:

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

Klingt so, als wäre die 'erste Zeile', von der Sie sprechen, Ihre Tabellenüberschrift. Sie sollten also wirklich daran denken, theadund tbodyin Ihrem Markup ( hier klicken ) zu verwenden, was zu einem 'besseren' Markup führen würde (semantisch korrekt, nützlich für Dinge wie Screenreader) ) und einfachere, browserübergreifende Möglichkeiten zur CSS-Auswahl ( table thead ... { ... })

oezi
quelle
3

Obwohl die Frage bereits eine anständige Antwort hat, möchte ich nur betonen, dass das :first-childTag den Elementtyp betrifft, der die Kinder darstellt.

Zum Beispiel im Code:

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

Wenn Sie nur die zweiten beiden Elemente mit einem Rand beeinflussen möchten, nicht jedoch das erste, würden Sie Folgendes tun:

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

Das heißt, da die inputs die untergeordneten Elemente sind, würden Sie sie first-childauf dem Eingabeabschnitt des Selektors platzieren.

CodyBugstein
quelle
1

Es tut mir leid, dass ich weiß, dass dies alt ist, aber warum nicht alle tr-Elemente so stylen, wie Sie es möchten, außer dem ersten, und die Pseudo-Klasse verwenden: first-child, bei der Sie widerrufen, was Sie für alle tr-Elemente angegeben haben.

Besser beschrieben durch dieses Beispiel:

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

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

/ Patrik

Patrik
quelle
1

Da tr:not(:first-child)wird von IE 6, 7, 8 nicht unterstützt. Sie können die Hilfe von jQuery verwenden. Sie können es hier finden

Tapos
quelle
1

Andere Option:

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

Vielleicht kann jemand davon profitieren, unten ist das, was ich verwendet habe

ol li:not(:first-child) {
    background: black;
    color: white;
}
Kokkonda Abhilash
quelle
-1

Sie können in Ihrem CSS auch einen Pseudoklassen-Selektor wie folgt verwenden:

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

Dadurch wird die Klasse nicht auf das erste Element mit der Klasse .desc angewendet.

Hier ist eine JSFiddle mit einem Beispiel: http://jsfiddle.net/YYTFT/ , und dies ist eine gute Quelle, um Pseudoklassenselektoren zu erklären: http://css-tricks.com/pseudo-class-selectors/

James
quelle
1
Dadurch wird der Stil nicht auf das erste Element, point, angewendet. first-childignoriert Klassen.
Fez Vrasta
-3

Sie können eine Klasse erstellen und die Klasse verwenden, wenn Sie alle Ihre zukünftigen definieren, die vom CSS ausgewählt werden sollen (oder nicht).

Dies würde schriftlich erfolgen

<tr class="unselected">

und dann in Ihrem CSS mit den Zeilen (und mit dem Befehl text-align als Beispiel):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}
user476033
quelle
2
Bitte verstehen Sie die Frage vor der Beantwortung
Ammar Bozorgvar