Стиль CSS для первого <td> в <tr>

Я пытаюсь установить все элементы <td> моего <tr> для выравнивания по правому краю, кроме первого, который я хочу выравнивать по левому краю. Я пробовал это:

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

Это делает все ячейки правильными. Если я поменяю порядок этих двух строк, то все ячейки выравниваются по левому краю. Очень смущен. Согласно w3schools,

Селектор first-child используется для выбора указанного селектора, только если он является первым дочерним элементом его родителя.

Но для меня это, похоже, не происходит.

Ответ 1

Ваш синтаксис неверен.

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

Должно быть:

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

Обратите внимание на полуколоны - они не должны находиться за пределами скобок {}

Кроме этого, вы правильно использовали :first-child.

jsFiddle demo

Ответ 2

Другой вариант, в зависимости от того, что вы хотите сделать:

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

Ответ 3

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

Вы можете сделать это в одной строке.