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

question from:https://stackoverflow.com/questions/19192960/css-style-for-first-td-in-a-tr

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