Override CSS property

Question

I have 2 file theme.css and main.css

theme.css

.table td {
           border-top: 1px solid #e8edf1;
           vertical-align: top;
           padding: 5px 5px !important;
           color: #576475;
           font-size: 11px;
}

main.css

.table td {
            padding: 1px 2px;
 }

I want to override property of td via main.css by including main.css after theme.css.

But final output takes property of theme.css .

PS: I want to override only padding property.

Not directly related to the problem, but I'd expect a main.css to come before theme.css, because the first sounds more generic and a theme is something easily replaceable. — Hugo G
– Hugo G, Commented Jan 9, 2017 at 11:16

Hugo G · Accepted Answer · 2017-01-09 11:14:25Z

2

Since the first CSS rules has !important applied, the only way to override it is using another !important rule:

.table td {
    padding: 1px 2px !important;
}

If you can, remove the !important keyword from all your CSS. There's better ways of defining the order.

answered Jan 9, 2017 at 11:14

Hugo G

16.8k9 gold badges62 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JohnnyKB · Accepted Answer · 2017-01-09 11:15:09Z

2

In terms of specificty, !important wins every time.

You should really avoid using !important and use specifity to your advantage. Ordering CSS files is one way to do it, ordering your rules is another.

For more on specificity: CSS-Tricks

So, in your case, you should remove the !important flag from your theme.css file, and that would solve it.

answered Jan 9, 2017 at 11:15

JohnnyKB

2,4001 gold badge14 silver badges13 bronze badges

Comments

sanjay · Accepted Answer · 2017-01-09 11:21:02Z

@Abhishek Please check following code with example of two different tables as per your requirement.

table td {
           border-top: 1px solid #e8edf1;
           vertical-align: top;
           padding: 5px 5px !important;
           color: #576475;
           font-size: 11px;
}

table.custom_table td{
  padding: 1px 2px !important;
 }

<table>
        <tr>  
            <td>fdhf</td>
             <td>dfdfdf</td>
          </tr>
              
  
</table>
<table class="custom_table">
        <tr>  
            <td>fdhf</td>
             <td>dfdfdf</td>
          </tr>
              
  
</table>

This reads more like a game of spot-the-difference than an answer. What did you change? Why does it solve the problem?

Collectives™ on Stack Overflow

Override CSS property

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related