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 [[email protected]]
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/
