CODEWITHSUNDEEP
css
Abhishek
Abhishek

Reputation: 1068

Override CSS property

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.

Upvotes: 0

Views: 81

Answers (3)

sanjay
sanjay

Reputation: 226

@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>

Upvotes: 0

Johnny Kutnowski
Johnny Kutnowski

Reputation: 2390

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.

Upvotes: 2

Hugo G
Hugo G

Reputation: 16536

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.

Upvotes: 2

Related Questions