Override CSS !important

Question

A CMS is automatically adding .content table {width:auto!important} to all my pages. (MediaWiki with the MobileFrontend extension and the site in mobile view)

The problem is, there are some tables I'd like to make 100%, but I also don't want to edit any of the CMS's code.

I can add my own CSS and used .mytableclassname {width:100%} and .mytableclassname {width:100%!important} both of which didn't set my table at 100%.

I can add .content table {width:100%!important} which now makes mytableclassname at 100%, but also every other table at 100% width too.

Is there a way to set .content table {width:} to something neutral to remove the forced auto size, and then set .mytableclassname {width:100%}?

I don't want to use any ids since there could be multiple tables on the same page.

Go read up on CSS specificity. `.content table.mytableclassname` — CBroe, Oct 21 '17 at 00:44

score 3 · Accepted Answer · answered Oct 21 '17 at 00:46

3

that's a specifity issue. Use

.content table.mytableclassname {width:100% !important}

to override the default rule. Simply said, that has more "weight" (i.e. higher specifity) than any of the rules you listed in your question.

answered Oct 21 '17 at 00:46

Johannes

64,305
18
73
130

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Unfortunately, there's no way around using !important to override another selector with !important. This problem is common when using Bootstrap as well. Increasing specificity by conventional means like this:

 .content table.mytableclassname {width:100% !important}

as Johannes suggested usually works, but should that fail there is an unconventional way that works 99.9% of the time:

 table.mytableclassname.mytableclassname {width:100% !important}

by repeating a class that already exists, you trump that selector (in AD&D terms it's making a sword +2 into a sword +3), and don't even need to add any extra classes, rearrange layout, use JavaScript/jQuery, etc.

Demo

.content {
  border: 1px dashed green
}

table {
  border: 1px solid black
}

table.X.X {
  border-color: blue !important;
}

.content table {
  border-color: red !important
}

<div class='content'>
  <table>
    <tr>
      <td>Table</td>
    </tr>
  </table>

  <table class='X'>
    <tr>
      <td>Table.X</td>
    </tr>
  </table>
  .content
</div>

<table class='X'>
  <tr>
    <td>Table.X</td>
  </tr>
</table>

<table>
  <tr>
    <td>Table</td>
  </tr>
</table>

Override CSS !important

2 Answers2

Demo