Styles from CSS file is overriding the style applied in the page

Question

I am adding a css class using jQuery

//Set the css class for tabItem's link
$("#" + menuID + " a").removeClass('navLinkNormal');
$("#" + menuID + " a").addClass('navLinkSelected');

But the colr value is superceded by a a:link and a:visted styles in a different css file. Hence instead of the red color, it is showing black color for the text.

I tried various approaches but din’t work. How can we force to use the red color to the link?

References:

HTML

   <ul id="nav">
        <li id="nav_Container" class="tabItem"><a href="javascript:void(0);">Add By Container</a></li>
        <li id="nav_WorkLot" class="tabItem"><a href="javascript:void(0);">Add By Worklot</a></li>
        <li id="nav_VisualAid" class="tabItem"><a href="javascript:void(0);">Add By Visual Aid</a></li>
    </ul>

Style

enter image description here

Can you recreate this in a fiddle? – j08691 Jul 08 '14 at 13:50 — j08691, Jul 08 '14 at 13:50

filoxo · Answer 1 · 2014-07-31T18:52:06.990

4

This is an issue with specificity. Your class is being overridden because of other styles that target the element "more specifically"; in other words:

If two selectors apply to the same element, the one with higher specificity wins.

The solution is as easy as targeting <a> elements with class navLinkSelected:

a.navLinkSelected { ... }

edited Jul 31 '14 at 18:52

answered Jul 08 '14 at 14:19

filoxo

8,132
3
33
38

Apolo · Answer 2 · 2014-07-08T14:03:47.720

1

You can try !important after your CSS property or add this one :

.navLinkSelected:visited {
    color: red;
}

edited Jul 08 '14 at 14:03

answered Jul 08 '14 at 13:56

Apolo

3,844
1
21
51

i was to long to create jsfiddle ;) you can see a test page, http://jsfiddle.net/9f8bK/ seems like a:visited is superior to a class selector rule – AlexDom Jul 08 '14 at 13:57
i mean .class vs :visited – AlexDom Jul 08 '14 at 14:03
yes, but the trick is that `.class:visited > a:visited` because `.class > tagname` in terms of priority. – Apolo Jul 08 '14 at 14:05
yes it's why i create a jsfiddle page, and i clicked +1 at your post, without rewriting same thing that's all :) – AlexDom Jul 08 '14 at 14:11
C'est la French Connection ;-) – Apolo Jul 08 '14 at 14:12
Si si, en espérant que le soleil reste longtemps ;) – AlexDom Jul 08 '14 at 14:14

score 0 · Accepted Answer · edited May 23 '17 at 12:01

0

Try to use an !important after the value has been set. Then the color value which is setted before isn't not longer used...

Example:

color: red !important;

I advise you also to use in a hover effect or something similar.

You can use !important to avoid global setted values for some certain elements.
Here a link where you can learn more about !important.

!important is added in CSS1 so no old or new browser has some trouble with that. Link here. And also !important is basic knowledge of CSS. Secretly I use it only in some cases, such as in effects.

edited May 23 '17 at 12:01

Community

1
1

answered Jul 08 '14 at 13:54

Thanks... Applying `!important` on my class's color attribute helped... I am going through google to understand why it helps :-) In the meanwhile if you can put some explanation on the `!important`, there is nothing like that. – LCJ Jul 08 '14 at 14:10
2

NO. `!important` should be used only for what it was made for, plus you break the natural cascading in your stylesheets. Its generally seen as bad practice to use it like this. Avoid using this solution at all costs. See: http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css – filoxo Jul 08 '14 at 14:11
1

@filoxo in the link you name it says: that you can avoid some global CSS rules... – Jul 08 '14 at 14:15
2

Yes, but it also lists some very good reasons against using it. The !important directive was put in place to help web page users cope with style sheets that might make pages difficult for them to use or read. It should be used with this in mind as you now may prevent persons with disabilities from properly being able to use your website. Also to quote the above article: `If you're using it just because you don't understand how specificity works, you're doing it wrong.` – filoxo Jul 08 '14 at 14:21
1

In the article you link it says _!important declarations **should not be used unless they are absolutely necessary** after all other avenues have been exhausted_. As that's not the case here, why recommend using it? – Andy Jul 08 '14 at 14:42
1

@Andy can you give some other solutuion to handle with the problem? – Jul 08 '14 at 14:43
filoxo has an example (you need to increase the specificity somehow, eg. by adding the tag) – Andy Jul 08 '14 at 14:44
I dont know why the Browser should have problems to read or use it? `!important` is added in CSS1 and supports IE 5.5+; Chrome 1+; Firefox 1+; Safari 3+; Link specified in answere – Jul 08 '14 at 14:48
[Specificity was also part of CSS1](http://www.w3.org/TR/REC-CSS1/#cascading-order), it should work in all browsers that support CSS AFAIK. – Andy Jul 08 '14 at 14:56
@Andy `Sort the declarations by explicit weight: declarations marked '!important' carry more weight than unmarked (normal) declarations.` This says in the link you name and i have said the same -.- I really don't know what you want to say... – Jul 08 '14 at 15:02
1

I'm not saying that `!important` doesn't work, I'm saying that in the article you yourself linked to (and many other places) it's strongly discouraged to use it. For the OP's question we don't _need_ `!important`, we can just use a more specific selector. – Andy Jul 08 '14 at 15:07
But you can also do this there is nothing against `!important`. There is no advantages when you use an other way and no disadvantages. The conversation isn't really necessary... The browser supports both. You dont have to use `!important`, no one forces you to use `!important`. My answere is also a solution and the answere of @filoxo too. – Jul 08 '14 at 15:14
1

Have you read the article you linked to? It explains everything. If you search for articles about using `!important` I think you'll find lots saying similar things. If you start using `!important` you can find yourself forced into using it again and again (or refactoring your styles). Anyway, I just wanted to explain my -1, my 2 cents, I'm going to stop commenting now! (Unless you have a specific question or something.) – Andy Jul 08 '14 at 15:18
1

Please don't act like !important can just be thrown out there like its just something minor to use. Take these comments with a grain of salt and recognize that while __it works__, it is bad practice (as noted in the linked SO article). There are in fact advantages to not using !important frivolously. Don't become hostile to those of us that work hard to eliminate bad practices. If further discussion is desired, please open up a chat thread. – filoxo Jul 08 '14 at 15:28

score 0 · Answer 4 · edited Jul 08 '14 at 14:12

0

If you can, you should try to add the file that contains the class you add via jQuery after the one that contains the rule that overide it. This way your rule will have more priority.

<link rel="stylesheet" src="file1.css" />
<link rel="stylesheet" src="file2.css" />

file2 being the one that contains the rules you add with JQuery

edited Jul 08 '14 at 14:12

answered Jul 08 '14 at 14:01

litelite

2,857
4
23
33

Not always true, for exemple : a rule with an id selector has priority over rule by tag name – Apolo Jul 08 '14 at 14:03

Styles from CSS file is overriding the style applied in the page

4 Answers4