class selector not working in css, but id works for add some styles

Question

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

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
– scrappedcola, Commented Sep 1, 2017 at 21:10
I'm not seeing anything wrong with your styling or markup. Codeply project is working too. — Jade Cowan
– Jade Cowan, Commented Sep 1, 2017 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
– Andrés Mauricio Gómez, Commented Sep 1, 2017 at 21:19
in Codelply its working but not in my project, that's interesting — Andrés Mauricio Gómez
– Andrés Mauricio Gómez, Commented Sep 1, 2017 at 21:34

fredrivett · Accepted Answer · 2017-09-01 21:45:56Z

5

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.

answered Sep 1, 2017 at 21:45

fredrivett

6,7223 gold badges48 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrés Mauricio Gómez Over a year ago

yes, using ".activeOption.activeOption " worked, I have to read about specifities issues, thanks man

fredrivett Over a year ago

No worries, happy to help Andrés. If the answer works for you and answers your question feel free to mark it as accepted.

Adnan · Accepted Answer · 2017-09-01 21:12:56Z

0

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

<link href="~/style.css" type="text/css" rel="stylesheet" />

answered Sep 1, 2017 at 21:12

Adnan

113 bronze badges

1 Comment

Andrés Mauricio Gómez Over a year ago

but the css code is in the same file, at the begining it was in another file but wasn't working so i moved it to the same file

Collectives™ on Stack Overflow

class selector not working in css, but id works for add some styles

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related