CODEWITHSUNDEEP
htmlcss
Stefano Maglione
Stefano Maglione

Reputation: 4150

Css rule doesn't operate

in my website I'm changing color font in a selector but it still remain the same old color. I don't understand the reason beacause the other rule in the same selector works correctly.

This is the website: http://debatoversigt.dk/

I'm triyng to change color in this selector, because I need to have yellow font in left item menu when is selected:

.selected{
background-image: url('../images/left_menu_hover.png');
background-repeat: no-repeat;
background-size: 100% auto;
color:yellow!important;
}

I've added this other rule but doesn't work on color,but ad example works on background:

.art-block  li:hover , .art-block  li:visited
{
color:red !important;
}

Upvotes: 1

Views: 55

Answers (2)

DrCord
DrCord

Reputation: 3955

Your .selected css is being overwridden by the css cascade:

.art-blockcontent * {
    color: #666 !important;
}

has a higher specificity than

.selected {
    color: #FF0 !important;
}

so it is "winning"

try to change your .selected style to:

#art-main .selected {
    color: #FF0 !important;
}

the additional id used will increase the specificity of you css rule and cause it to "win", read more about css specificity: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Upvotes: 2

Mr. Mayers
Mr. Mayers

Reputation: 356

Your headers are links, so simply changing the color won't work.

.selected a:link, .selected a:visited {
 text-decoration: none;
 color: yellow;
}

Try something like that.

Upvotes: 0

Related Questions