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

Question

Comment pouvez-vous sélectionner le premier et le dernier TD de 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 les éléments suivants:

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

La pseudo-classe : first-child a la signification "sélectionnez cet élément s'il s'agit du premier enfant de son parent". While : last-child signifie "sélectionnez cet élément s'il s'agit du dernier enfant de son parent".

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