CODEWITHSUNDEEP
htmlcss
inspile
inspile

Reputation: 35

Text color of link with "active" class

I have a navigation bar, and I need the active page, marked by "subactive" class on the li element to have white text instead of black. The HTML and CSS can be found here: http://jsfiddle.net/a4hBz/

I use color on the .subactive selector in CSS, but its ignored by the browser.

Upvotes: 1

Views: 240

Answers (3)

filype
filype

Reputation: 8380

I wouldn't use the !important if I didn't need to.

To make it work I would replace the line

#sidenav a:hover, .subactive a

to

#sidenav a:hover, #sidenav .subactive a:link

and remove the code below which doesn't seem to be used

.subactive a
{
   color: #fff;
   background-color: #034676;
}

​ Check out the working example on http://jsfiddle.net/a4hBz/1/

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101594

That's largely due to how CSS "weighs" the styles. IDs always have more presidence over a standard tag name, class name or pseudo-class. A simple solution is to be as-specific with your anchor class applying the "Active" styling as you are with the rest of the standard elements. Basically:

.subactive a

Should become

#sidenav .subactive a

If that doesn't work for your schema, you'll need to either turn #sidenav in to a class, or work-around it some other way.

By the way, what I was referring to earlier is a style's specificity. As it currently stands, your styles weigh in like so:

#sidenav a              a=0, b=1, c=0, d=1 -> specificity = 0,1,0,1
.subactive a            a=0, b=0, c=1, d=1 -> specificity = 0,0,1,1
#sidenav .subactive a   a=0, b=1, c=1, d=1 -> specfiicity = 0,1,1,1

Almost think of it like this:

(a * 1000) + (b * 100) + (c * 10) + d

The style with the highest number wins.

Upvotes: 4

Alex
Alex

Reputation: 35399

Either add !imporatant:

.subactive a
{
    color: #fff!important;

    /**/

}

Or increase the specificity of the definition:

http://www.w3.org/TR/CSS2/cascade.html#specificity

Upvotes: 1

Related Questions