0

How to override the inline css having !important property. I have tried the following link also How to override !important? but this is not helping.

<head>
ul{
color:yellow !important;//from here i want to overrride the inline css**
}
</head>

<body>
<div id="something">
 <table>
  <tr>
   <td>
     <ul>
       <li style="color:#fff !important"></li> // i want to oveeride this inline css
     </ul>
   </td>
  </tr>
 </table>
</div>
</body>
Community
  • 1
  • 1
R R
  • 2,999
  • 2
  • 24
  • 42

1 Answers1

0

The easiest way to add strength of specificity without changing the specificity of specificity (ie reducing the scope of matched elements) is to add :nth-child( n ) to the selector.

ul:nth-child( n ) {
  color: yellow !important;
}
 
<ul style="color: red !important">
  <li>
    Am I red?
  </li>
</ul>

The reason :nth-child( n ) is especially good for this is that it will never disqualify the selector, because all elements match :nth-child( n ). It can also be stacked indefinitely:

:nth-child( n ):nth-child( n ):nth-child( n ){
  color: red;
}

:nth-child( n ):nth-child( n ){
  color: blue;
}

:nth-child( n ){
  color: yellow;
}
nth-child will stack any number of times!
Barney
  • 16,181
  • 5
  • 62
  • 76
  • Of course you will not be able to overwrite `style="color: red !important"` with **any** of your selectors. – dfsq Oct 21 '14 at 11:18
  • Haha you're utterly right. – Barney Oct 21 '14 at 11:20
  • This is a good article with selectors weights: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ – dfsq Oct 21 '14 at 11:21