Overriding style sheets
I have a link where I want to change the text color away from the color I have set for the hyperlinks. My code:
<span class="button"><%= link_to "Create new scenario", :action => "create" %></span>
And my CSS:
a:link {
color:rgb(50%, 15%, 5%);
text-decoration:none;
}
.button {
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
background-color:rgb(93%, 93%, 93%);
border:1px solid black;
color:black !important;
line-height:1.9;
margin:0 3px 3px 0;
padding:4px 8px 4px 3px;
text-decoration:none;
}
For some reason, the hyperlink text is still brown, rgb (50%, 15%, 5%).
a source to share
Change your css to use the .button class and bindings with the parent css.button class. as shown below:
.button,.button a:link {
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
background-color:rgb(93%, 93%, 93%);
border:1px solid black;
color:black !important;
line-height:1.9;
margin:0 3px 3px 0;
padding:4px 8px 4px 3px;
text-decoration:none;
}
EDIT: Be aware that this causes the border to be repeated and makes the hyperlink appear without underlining due to the text decoration: none. The best practice in this case is to have separate css declarations.
.button {....}
.button a:link {.....}
a source to share
I think this is due to specifics; span
(.button) is less reference specific than a:link
that, so styles are applied a:link
(correctly as per spec:http://www.w3.org/TR/CSS2/cascade.html .
If you want to override the styles a:link
for that one button (or ... well, any other in the same way), add the class to the tag <a>
, not its parent.
Although you might get by:
.button > a:link {/* styles */}
Which should get specific since this one <a>
is a descendant of the span class .button
.
Edit:
It is worth noting that the >
' selector is only applicable to immediate descendants, so it will be affected a
inside the class element .button
, but a
inside the div, in turn, inside the class element .button
will not be affected.
Also this selector is not supported by IE (below version 7 of course and I am not aware of version 7 or indeed version 8). It might be convenient to use the <operator *
:
.button * a:link {/* styles */}
keeping in mind that while this is supported - I think in IE after version 5.x at least it's a bit broad in that it will target everything a
inside a class element .button
, regardless of any intermediate elements, and probably will be less specific than any rule applied to a:link
s.
a source to share
" ! important
" is not for formatting the child style. This allows the user to override the styles assigned by the author of the web page. This is useless in your case.
The correct way to do it is:
.button {
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
background-color:rgb(93%, 93%, 93%);
border:1px solid black;
color:black;
line-height:1.9;
margin:0 3px 3px 0;
padding:4px 8px 4px 3px;
text-decoration:none;
}
.button a {
color:black;
}
Notes:
- "
.button > a
" is a good idea, but it won't work in IE6. Therefore, you need to use ".button a
" here. - Putting "
.button
" and ".button a
" together in one style set will make the button repeat on the button.
a source to share