Question

I’ve got this HTML:

<td align="right">$12</td>

But the text isn’t right-aligned because somewhere in the stylesheet it says

td { text-align: left; }

I can override this style further down by doing something like this:

.bugnote table td, .bugnote table th {
    text-align: inherit;
}

But “inherit” doesn’t have the effect I was hoping for: to clear the attribute. It’s still left-aligned. Is there a way to essentially remove/clear any previously set text-align attributes?

Answer 1

inherit means that the element will assume the style of its parent.

You can’t “clear” existing style specifications, so you’ll have to override it with your desired result. Ex:

.bugnote table td, .bugnote table th {
    text-align: right;
}

If your browser support requirements allow it, you could refine the selector to use CSS2’s attribute selector. Ex:

.bugnote table td[align="right"], .bugnote table th[align="right"] {
    text-align: right;
}