Override CSS style

Question

I am defining some CSS classes which, when applied to a table, will generate some default styling.

For example, lets say I create a class called myTable:

.myTable {
  th {
    background-color: #000;
  }

  td {
    background-color: #555;
  }
}

So any table with the .myTable class would get those colors on th and td by default.

I thought that if another class were to be assigned to an individual td, then it would override the default style.

So if I had another class:

.red { background-color: red; }

And a table:

<table class=myTable>
  <th class="red">Content</th>
  <td>Hello!</td>
</table>

I thought that the "red" class would cause the background of the header to be red, rather than black. That is not the case. In order for this class to override the original, it has to be defined within the myTable class like so:

td.red { background-color: red; }

Am I missing something here, is there another way to do this so that I could have default styles that are more easily overridden?

Answer 1

There's a standard way to give some style priority.

td.red { background-color: red !important; }

Answer 2

This is all a question of the specificity of the css selectors used (i.e. how exactly does a selector match any given HTML element). The more specific a selector is, the higher the priority of its styles are.

For an in-depth explanation of CSS selector specificity, have a look at this page: CSS Specificity: Things You Should Know.

Answer 3

The idea is that which style to use depends on two things: how specific it the selector is, the position of rule (latest rule wins). Example:

p {
  background-color: red;
}

p {
  background-color: blue;
}

Paragraphs will be blue. Another example:

body p {
  background-color: red;
}

p {
  background-color: blue;
}

Paragraphs will be red since "body p" is more specific.

Edit: Also try to avoid using !important. It is supported but a side effect is that you can never override it (ever). Thus only use it in the really extreme cases where you have no way of knowing how to construct specific enough rules (e.g.: generic print.css).

Answer 4

There are a couple ways, you can use !important at the end of the declaration as such:

.red {
    background-color: red !important;
}

Also, the more specific a declaration, the more prevalent it will be. So anything in table.myTable td.red {} will have more prevalence over anything in td.red{}.