Comment sélectionner le premier et le dernier TD d'affilée?

Comment sélectionner le premier et le dernier TDconsécutif?

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

Vous pouvez utiliser la :first-childet :last-childpseudo-sélecteurs:

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

Cela devrait fonctionner dans tous les principaux navigateurs, mais IE7 a quelques problèmes lorsque des éléments sont ajoutés dynamiquement (et cela ne fonctionnera pas dans IE6).

Vous pouvez utiliser l'extrait de code suivant:

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

Utilisation des pseudo classes suivantes:

: first-child signifie "sélectionner cet élément si c'est le premier enfant de son parent".

: last-child signifie "sélectionner cet élément si c'est le dernier enfant de son parent".

Seuls les nœuds d'élément (balises HTML) sont concernés, ces pseudo-classes ignorent les nœuds de texte.

Vous pouvez utiliser les : first-child et : last-child pseudo-selectors :

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

Ou vous pouvez utiliser une autre manière comme

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

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

Les deux voies fonctionnent parfaitement

Si vous utilisez sass (scss), vous pouvez utiliser l'extrait de code suivant:

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

Si la ligne contient des thbalises de début (ou de fin) avant le, tdvous devez utiliser :first-of-typeles :last-of-typesélecteurs et. Sinon, le premier tdne sera pas sélectionné s'il ne s'agit pas du premier élément de la ligne.

Cela donne:

td:first-of-type, td:last-of-type {
    /* styles */
}