Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Override CSS style

Tags:

css

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?

like image 546
Zachary Wright Avatar asked Sep 09 '10 18:09

Zachary Wright


People also ask

How do I override CSS styles?

To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.

What is overriding my CSS?

If you can see your new CSS in the Styles pane, but your new CSS is crossed out, it means that there's some other CSS that is overriding your new CSS. In CSS terminology this concept is called Specificity. Chrome DevTools can help you find the old CSS that is causing your new CSS to not be applied.

Does HTML style override CSS?

Using HTML Code in this way creates an internal stylesheet (on the page) that overrides any same-specificity CSS defined in the external stylesheets of your themes and modules. This is handy when you want to test changes of your existing module and frontend theme styles, without having to recompile .

Can you override an important CSS?

There are two ways you can override an ! important tag in CSS. You can add another CSS rule with an ! important tag and use a selector with a higher specificity.


2 Answers

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

like image 116
ipartola Avatar answered Sep 19 '22 13:09

ipartola


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{}.

like image 40
Robert Avatar answered Sep 23 '22 13:09

Robert