JavaScript and CSS classes not acting as expected

Question

I have set up a custom navigation bar which when I am scrolling through a website slides the current nav which is occupying the majority of the screen out slightly.

Example extracts from the CSS and JS are as follows

/*CSS*/
#topnav {
    top: 100px;
    background-color:white;
    border-top-style:solid;
}

.topActive {
    z-index:5000;
    width:3cm;
    background-color:black;
    border-style:solid;
    border-right-style:none;
    color:white;
}

/*JS*/
if(nav == 0) {
    $("#topnav").addClass("topActive topnavb");
    ...

In this example, I would expect that when the nav tab in the nav bar slides out the background colour of it is black; however, in this case, the background colour would be white still. Essentially the class is not overriding the properties in the id

I would appreciate any help in fixing this problem

Just class wont override the properties by id. – rrk May 26 '16 at 14:51 — rrk, May 26 '16 at 14:51
@RejithRKrishnan Is there a different approach I could try? – Dan May 26 '16 at 14:54 — Dan, May 26 '16 at 14:54

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

It is because of the CSS specificity. From the link:

The following list of selector types is by increasing specificity:

Type selectors (e.g., h1) and pseudo-elements (e.g., :before).

Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).

ID selectors (e.g., #example).

So an ID will always override a class.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 26 '16 at 14:56

Francisco Romero

12,787
22
92
167

score 0 · Answer 2 · answered May 26 '16 at 14:54

0

The css specificity of a class is lower than that of an id. This causes id rules to override class rules.

https://css-tricks.com/specifics-on-css-specificity/

answered May 26 '16 at 14:54

Eric N

2,136
13
13

score 0 · Accepted Answer · edited May 23 '17 at 10:34

After reading up on specificity which the other answers have been talking about I found a command which can be added to the end of the line. This is !important. Even though !important is normally considered bad practice, see here for more about the practice of using !important, in this case it is not considered bad practice. This is because it is overriding one property which is otherwise unchanged in any further use of style sheets in this website.

score -1 · Answer 4 · answered May 26 '16 at 14:55

-1

Browsers will choose the property that is defined in the more precise rule. Id selectors are more precise than class selectors. You juste have to use #topnav.topActive instead of .topActive

answered May 26 '16 at 14:55

wilovent

1,364
1
12
15

Better yet, reduce the specificity by using a different class for the base rules so the id isn't being used at all. – Eric N May 26 '16 at 14:56

JavaScript and CSS classes not acting as expected

4 Answers4