Question

I want to style the anchor links in my gridview header with css. My style for the classes th works but the style for th a does not apply to it. It is overwritten by the containing divs a style. Also if I do th a or th a:hover without a preceding class it does not effect the hyperlinks in my th. I have tested this in both IE and Firefox. This is the gridview portion of my css:

.gridview  
{  
    border-color: #9BBE00;  
    border-width: thin;  
    border-style: solid;  
    width: 700px;   
}

.gridview th  
{  
    background-color: #F4A80A; 
    color: White;  
    font-weight: bold;  
}  
.gridview th a  
{  
    font-weight: bold;  
    color:Red;  
}  
.gridview th a:hover  
{  
    font-weight: bold;  
    color:Red;  
}  
.gridview td  
{  
    text-align:center;  
}

Answer 1

This is probably a specificity issue. CSS rules are weighted not only by their source and order, but according to a formula:

1. Inline? 1000 points
2. IDs in selector? 100 points for each
3. Classes and pseudo-classes? 10 points each
4. Specific elements? 1 point each

Therefore you might have something like this:

div#something a { color: blue; } /* 102 points */

overriding your style:

.gridview th a { color: red; } /* 12 points */

You can solve this by either making your style more specific:

div#something .gridview th a { color: red; } /* 123 points */

or using the hackier !important approach:

.gridview th a { color: red !important; } /* overrides more specific selectors */

To be technically correct, I should mention that this is not really straight addition of points if any position reaches 10. For example, if for some strange reason you had a selector with 12 classes, the specificity weight might be:

0   1   12   0

That is, don’t carry the one. The above is less specific than:

0   2   0   0

Finally, I assume you realize your :hover style is the same as your plain link style.