a link not overrite by css

Question

In my CSS I have a main container with id main. In the CSS it looks like this:

#main a:hover, #main a:active, #main a:focus {
    background: none repeat scroll 0 0 #095197;
    color: #FFFFFF;
}

In a particular div I want the link style to be different:

.main_list_div .text_div .mainbt a.bt {
    width: 100px;
    height: 26px;
    background: url(../image/bt.png) no-repeat;
    display: block;
    margin-top: 22px;
    text-decoration: none
}
.main_list_div .text_div .mainbt a.bt:hover,
.main_list_div .text_div div.mainbt link.bt:hover {
    width: 100px;
    height: 26px;
    background: url(../image/bth.png) no-repeat;
    display: block;
    margin-top: 22px;
    text-decoration: none;
    background-color: transparent
}

My HTML is:

<div class="main_list_div">         
    <div class="image_div"><img src="images/directory/1338033387.jpg"></div>
    <div class="text_div">
        <div class="company_name">Yahoo India</div> 
        <div class="category_name">Manufacturers of Primary Category / Secondary Category / Secondary Category</div> 
        <div class="mainbt"><a href="directory-list/yahoo/yahoo-india.html" class="bt"></a></div>
    </div>

    <div class="clear"></div>
</div>

The problem is a (link) is overridden but a:hover is not. How do I override a:hover ?

sorry i forgot to add class `mainbt`, see i have add in question — Tarun Baraiya, May 28 '12 at 07:36

score 3 · Accepted Answer · edited May 23 '17 at 12:11

3

I think that the issue is that the first rule #main a:hover has higher precedence that the second rule .main_list_div .text_div .mainbt a.bt:hover. If I recall correctly id selectors have a weight of 100, class and attribute selectors a weight of 10 and element selectors a weight of 1, the rule with the highest precedence wins - if there are rules with the same precedence then the position that the rules are defined is used to determine the outcome. In your example the first rule would have a precedence of 111, the second 51.

As mentioned in other answers you don't have a .mainbt element.

Just found another SO answer that explains precedence in more detail.

edited May 23 '17 at 12:11

Community

1
1

answered May 28 '12 at 07:42

detaylor

7,112
1
27
46

it means to override any `#id` id makes div with id – Tarun Baraiya May 28 '12 at 07:52
@Toms: Yes. The simplest solution would be to add `#main` to the start of the second rule. This would remove the need to change any of your HTML. – detaylor May 28 '12 at 07:55

score -1 · Answer 2 · answered May 28 '12 at 07:35

-1

It seems there is no element with mainbt class anywhere. So the css selector won't match.

You should probably use selector like:

.main_list_div .text_div a.bt:hover { ... }

answered May 28 '12 at 07:35

Jan Zyka

17,460
16
70
118

1

Thanks for the downvote for no reason, hope you enjoyed :-) By the time I was writing this the question looked way different. – Jan Zyka May 28 '12 at 07:59

a link not overrite by css

2 Answers2