CSS precedence, when styling with JS

Question

This question is in regards to precedence. I have an <ul> that contains my nav items in <li> I have an id for the <ul> which I use to reference the <li> and <a> tags nested within for styling. This all works fine, but when I use JavaScript to add a class to these specific <a> tags, to change the appearance when hovering over the links nothing happens.

I know the code is correct as I have tested it, but it just seems the ID styles take precedence over the Class's in when referencing styles.

How would I go about finding a solution, one idea I have is to remove the existing ID on mouseenter before adding the class, and then visa versa on mouseleave. Is there an easier solution?

We will need to see your selectors for both the CSS and JavaScript. — Joe
– Joe, Commented Feb 21, 2013 at 16:40

Andrei Filonov · Accepted Answer · 2013-02-21 16:41:58Z

2

ID styles are stronger, but you can use it when adding class for styling links as well.

So, if your menu is

<ul id="main">
    <li><a href=#></a></li>
</ul>

And JS adds class "hovered" to element, then use CSS

#main .hovered {
.. styles here
}

answered Feb 21, 2013 at 16:41

Andrei Filonov

8346 silver badges8 bronze badges

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

1 Comment

cimmanon Over a year ago

Here's some additional reading on CSS Specificity: coding.smashingmagazine.com/2007/07/27/…

Brad M · Accepted Answer · 2013-02-21 16:40:42Z

-1

Try adding !important to the end of your css for values which require overriding.

.class { color: #fbfbfb !important; }

answered Feb 21, 2013 at 16:40

Brad M

7,9101 gold badge25 silver badges40 bronze badges

1 Comment

Chris Over a year ago

This worked perfectly, thank you. Never used !important before, simple solution, really appreciate it

Collectives™ on Stack Overflow

CSS precedence, when styling with JS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related