CSS style for first <td> in a <tr>

Question

I'm trying to set all the <td> elements of my <tr> to be right-aligned except the first one, which I want to be left-aligned. I tried this:

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

That makes all cells be right-aligned. If I swap the order of those two rows, then all cells are left-aligned. Highly confused. According to w3schools,

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

But that doesn't seem to be happening for me.

Answer 1

Your syntax was incorrect.

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

Should be:

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

Note the semi-colons - they shouldn't be outside of the brackets {}

Other than that, you were using :first-child properly.

jsFiddle demo

Answer 2

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

You can do that in one line.

Answer 3

Another option, depending on what you want to do:

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