Override * CSS style

Question

In my first line I have the following style:

* {
    text-align:left;
}

Which works well through the site as most of it is left aligned. However a handful of areas need to be text-align: center and it will not update, even with !important. for example:

table.footer {
    text-align:center !important;
}

Any ideas on how I can fix this?

Answer 1

I guees I know what is missing.

The table.footer selector does only match for a table with class footer, not for the elements inside it

You could do

table.footer td {
    text-align: center;
}

See http://jsfiddle.net/mMM5q/

or perhaps even better

html {
    text-align: left;
}
* {
    text-align: inherit;
}

See http://jsfiddle.net/B3F9U/

Answer 2

It should work as you can see in this live example.

You might want to do this instead:

table.footer td
{
    text-align:center;
}

!important is not needed anyway.

Live example