0

I have a stylesheet which has the following property,

.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
    color:#FFFFFF!important;   
}

I can't edit the stylesheet. How do I change the property to

color:#000000!important;

I tried to write the following code in another stylesheet,

.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
    color:#000000!important;   
}

but it did not work. Please guide. Thanks.

3 Answers3

0

In order to override an !important rule you have to put a same specific rule after the previous one or to increase specificity of new rule as:

nav.primary-nav li.suppa_rwd_button, nav.primary-nav li.suppa_rwd_button span{
    color:#000000!important;   
}

* suppose that .primary-nav is a nav element and .suppa_rwd_button a li element, you could change them due to your markup.

In both cases you have to also use !important in your new rule.

Reference: MDN - Specificity

emmanuel
  • 9,607
  • 10
  • 25
  • 38
0

Other than Emmanuel's answer which talks about this: CSS Specificity, You can also try using two approaches:

Change order of stylesheet

Make sure your other stylesheet order is higher than the current version. That is include the new stylesheet link after the stylesheet which is to be overridden

<link rel="stylesheet" href="style.css"> 
<link rel="stylesheet" href="style1.css"> <!-- Styles that will overwrite -->

Inline HTML

If you can change your HTML, you can use this:

<span style="color: #000000 !important;">

!important in inline style will have higher priority than in other types of styles.

m4n0
  • 29,823
  • 27
  • 76
  • 89
0

Did you try using:

.primary-nav .suppa_rwd_button span{
color:#000000!important;   
}

Other way could be using JavaScript:

Override using JavaScript

$('.mytable td').attr('style', 'display: none !important');

Cheers!

PG Rated Programmer
  • 1
  • 6