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 ?

Answer 1

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.