web-dev-qa-db-fra.com

Style CSS pour le premier <td> dans un <tr>

J'essaie de définir tous les éléments <td> de mon <tr> pour qu'ils soient alignés à droite, sauf le premier, que je veux aligner à gauche. J'ai essayé ceci:

<style>
td { text-align: right };
td:first-child { text-align: left };
</style>

Cela rend toutes les cellules alignées à droite. Si j'échange l'ordre de ces deux lignes, toutes les cellules sont alignées à gauche. Très confus. Selon w3schools,

Le sélecteur: premier enfant est utilisé pour sélectionner le sélecteur spécifié, uniquement s'il s'agit du premier enfant de son parent.

Mais cela ne semble pas se produire pour moi.

htmlcsscss-selectors
24
Gargoyle

Votre syntaxe était incorrecte.

td { text-align: right };                    /* This was being applied */
td:first-child { text-align: left };         /* This wasn't.. */

Devrait être:

td { text-align: right; }
td:first-child { text-align: left; }

Notez les points-virgules - ils ne doivent pas être en dehors des parenthèses {}

À part cela, vous utilisiez :first-child correctement.

Démo jsFiddle

55
Josh Crozier
td:nth-child(2) { text-align: right; }

Vous pouvez le faire sur une seule ligne.

2
Sean Berce

Une autre option, selon ce que vous voulez faire:

table tr td {
    background-color:red;}
table tr td:nth-child(1) {
    background-color:green;}
2
TimSPQR