How to apply text-align left in the first column and text-align right in the others

Question

I have a Table to style, how can I apply text-align:left; just for the first column and text-align:right; for the other columns?

Here my Table example:

http://jsfiddle.net/gianlucaguarini/hAv7P/

At the moment the text-align is left for all the columns.

Answer 1

You might want to look at the :first-child pseudo-class (W3C definition) - this is exactly the kind of thing it was designed for. You could use it like this:

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

The :first-child pseudo-class means the selector only matches the first <td> in each <tr>.

Example here: http://jsfiddle.net/xv5Cn/1/

Answer 2

You need to specify the following CSS:

.table td, .table th {     text-align:left; }  #right, .table td + td, .table th + th {     text-align:right; } 

Example here: http://jsfiddle.net/mWeYM/

You can read more about adjacent siblings CSS selector here: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors