0

Trying to set some styles but class selector "." is not working, but if I use id selector "#" it works

here the code 

<style>
    .activeOption{
        color: #fff;
        background: rgba(255,255,255,0.2);
        text-decoration: none;
    }
</style>
    <li ><a id="" class="activeOption" href="#" onclick="Javascript : console.log('sisas')">Datos del Cliente</a></li>

the thing is that I wanna use that style for many comoponents so id selector is not apropiated

this is what I see when inspect the element

thanks if someone can help me

Andrés Mauricio Gómez
  • 85
  • 1
  • 13
  • What isn't working? Have you inspected the element in the dom explorer to see what styles are being applied? Do you have other styles that are overriding your style? btw your onclick can just be `onclick='console.log('sisas')` – scrappedcola Sep 01 '17 at 21:10
  • I'm not seeing anything wrong with your styling or markup. [Codeply project](https://www.codeply.com/go/3rfQpd5qpZ) is working too. – Jade Cowan Sep 01 '17 at 21:12
  • Onclick action is working fine, the problem is that the styles aren't be displayed when I use class selector, but if I use id selector the styles are displayed well, – Andrés Mauricio Gómez Sep 01 '17 at 21:19
  • Could it be a [specificity issue](https://stackoverflow.com/questions/2809024/points-in-css-specificity)? – Jo. Sep 01 '17 at 21:27
  • in Codelply its working but not in my project, that's interesting – Andrés Mauricio Gómez Sep 01 '17 at 21:34
  • do you have any class in your html `.activeOption` – Omi Sep 01 '17 at 21:45

2 Answers2

2

What that screenshot is saying is that other styles are overriding this style due to specificity.

The best way to solve specificity issues is to decrease the specificity of the selectors overriding it. That isn't always possible though, so as a last resort you can increase your specificity by chaining classes to themselves.

.activeOption.activeOption {
     [styles]
}

You can chain as many times as needed, the more chains the more specificity it overrides. Note that if trying to override an ID this method doesn't work as it requires 255 chains. Refactor the ID is my advice here.

You can see how specificity is calculated here.

fredrivett
  • 1,771
  • 17
  • 24
0

Have you tried using the root operator "~" for stylesheets in your master page?

<link href="~/style.css" type="text/css" rel="stylesheet" />
Adnan
  • 11
  • 3