Comment sélectionner le premier et le dernier TD à la suite?

Question

Comment pouvez-vous sélectionner le premier et le dernier TD à la suite?

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

Answer 1

Vous pouvez utiliser les pseudo-sélecteurs :first-child et :last-child:

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

Answer 2

Vous pouvez utiliser l'extrait suivant:

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

Utilisation des pseudo-classes suivantes:

: first-child signifie "sélectionnez cet élément s'il s'agit du premier enfant de son parent".

: last-child signifie "sélectionnez cet élément s'il s'agit du dernier de son parent de son parent".

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

Answer 3

Vous pouvez utiliser les : premier-enfant et : dernier-enfantpseudo-selectors:

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

Ou vous pouvez utiliser un autre moyen comme

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

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

Les deux sens fonctionnent parfaitement

Answer 4

Si la ligne contient des balises th avant (ou fin) avant le tdm, utilisez les sélecteurs :first-of-type et :last-of-type. Sinon, le premier td ne 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 */
}