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

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

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

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).

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.

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

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*/
   }
 }

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 */
}