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
– rrk

2016-05-26 14:51:56 +00:00
Commented May 26, 2016 at 14:51 — rrk
– rrk, Commented May 26, 2016 at 14:51
@RejithRKrishnan Is there a different approach I could try?

Dan
– Dan

2016-05-26 14:54:19 +00:00
Commented May 26, 2016 at 14:54 — Dan
– Dan, Commented May 26, 2016 at 14:54
I have added an answer.

rrk
– rrk

2016-05-26 14:55:28 +00:00
Commented May 26, 2016 at 14:55 — rrk
– rrk, Commented May 26, 2016 at 14:55

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered May 26, 2016 at 14:56

Francisco Romero

13.3k23 gold badges100 silver badges173 bronze badges

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

Comments

Eric N · Accepted Answer · 2016-05-26 14:54:22Z

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, 2016 at 14:54

Eric N

2,22616 silver badges13 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:34:03Z

0

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.

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered May 26, 2016 at 16:17

Dan

7,9047 gold badges60 silver badges130 bronze badges

Comments

wilovent · Accepted Answer · 2016-05-26 14:55:00Z

-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, 2016 at 14:55

wilovent

1,3841 gold badge12 silver badges15 bronze badges

1 Comment

Eric N Over a year ago

Better yet, reduce the specificity by using a different class for the base rules so the id isn't being used at all.

Collectives™ on Stack Overflow

JavaScript and CSS classes not acting as expected

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related