Wie wähle ich den ersten und den letzten TD in einer Reihe aus?

170

Wie können Sie den ersten und den letzten TDin einer Reihe auswählen ?

tr > td[0],
tr > td[-1] {
/* styles */
}
Clarkk
quelle

Antworten:

377

Sie könnten die :first-childund :last-childPseudo-Selektoren verwenden:

tr td:first-child,
tr td:last-child {
    /* styles */
}

Dies sollte in allen gängigen Browsern funktionieren, aber IE7 hat einige Probleme, wenn Elemente dynamisch hinzugefügt werden (und es funktioniert nicht in IE6).

James Allardice
quelle
und was ist, wenn Sie das zweite oder dritte Kind auswählen möchten?
Clarkk
2
und was ist der Unterschied zwischen tr > tdund tr td?
Clarkk
Die folgende Regel legt den Stil aller P-Elemente fest, die untergeordnete Elemente von BODY sind: body> P { Zeilenhöhe : 1.3} Sie können Folgendes sehen: w3.org/TR/CSS2/selector.html#child-selectors (dieselbe Seite wurde veröffentlicht von James)
Francesco
4
@clarkk - Wählt >nur direkte Kinder aus. Ohne sie werden alle Nachkommen (z. B. Kinder von Kindern) ausgewählt. Um das 2. oder 3. Kind auszuwählen, schauen Sie in den nth-childPseudo-Selektor.
James Allardice
@BoltClock Ich habe einmal Ihre Lösung für dieses Problem mit gesehen +. so etwas wie, tr td + td + .... +td aber was ist, wenn ich nicht weiß, wie viele td ich habe?
Royi Namir
19

Sie können das folgende Snippet verwenden:

  tr td:first-child {text-decoration: underline;}
  tr td:last-child {color: red;}

Verwenden der folgenden Pseudoklassen:

: first-child bedeutet "Wählen Sie dieses Element aus, wenn es das erste Kind seines Elternteils ist".

: last-child bedeutet "Wählen Sie dieses Element aus, wenn es das letzte Kind seines Elternteils ist".

Es sind nur Elementknoten (HTML-Tags) betroffen. Diese Pseudoklassen ignorieren Textknoten.

Francesco
quelle
15

Sie können Folgendes verwenden : erstes Kind und : letztes Kind pseudo-selectors :

tr td:first-child{
    color:red;
}
tr td:last-child {
    color:green
}

Oder Sie können auf andere Weise wie verwenden

// To first child 
tr td:nth-child(1){
    color:red;
}

// To last child 
tr td:nth-last-child(1){
    color:green;
}

Beide Wege funktionieren perfekt

Ajay Gupta
quelle
2

Wenn Sie sass (scss) verwenden, können Sie das folgende Snippet verwenden:

tr > td{
   /* styles for all td*/
   &:first-child{
     /* styles for first */ 
   }
   &:last-child{
    /* styles for last*/
   }
 }
Elbaz
quelle
2

Wenn die Zeile einige führende (oder nachfolgende) thTags enthält td, sollten Sie die :first-of-typeund die :last-of-typeSelektoren verwenden. Andernfalls wird das erste tdnicht ausgewählt, wenn es nicht das erste Element der Zeile ist.

Das gibt:

td:first-of-type, td:last-of-type {
    /* styles */
}
Christopher Chiche
quelle
1
Sie haben mir Zeit gespart, als ich das letzte Kind verwendet habe, das nicht funktioniert hat, aber Ihre Lösung hat perfekt funktioniert
Mirza Obaid