On Sep 3, 2009, at 8:14 PM, MOHAMMED NASEER wrote:

> Hi - I am new to CSS and have problem understanding why   a:hover
> class's 'background-color' property is not affecting an email link
> styled by a descendent selector ( #legal a ) in following code.
> ____________________________________________
>
> a {
>   color: #207EBF;
>   text-decoration: none;
>   font-weight: bold;
>   border-bottom: 2px solid #F60;
> }
> a:visited {
>   color: #6E97BF;
> }
> a:hover {
>   color: #FFF;
>   background-color: #6E97BF;
>   border-bottom-color: #6E97BF;
> }
> #legal a {
>   color: #666666;
>   border: none;
>   background: url(images/email.gif) no-repeat left center;
>   padding-left: 20px;
>   margin-left: 10px;
>   }

It is not a question of cascade but specificity: you need to include a  
ruleblock for the #legal a:hover.

'#legal a' is more specific (specificity: 101) than  
'a:hover'  (specificity: 11) and will always override the style set by  
your 'a:hover'.

<http://www.w3.org/TR/css3-selectors/#specificity>


Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to