Why is the color for a:link overriding the color for a.cssbtn? Why is it only doing it sometimes?
<style type="text/css">
a.cssbtn, a.cssbtn:visited {color:blue; }
a.cssbtn:hover {color:red; cursor:hand; }
a {text-decoration: none;}
a:link{color:#a62c3c}
a:active {color:#a62c3c}
a:visited {color:#a62c3c}
a:hover {color: #143974}
</style>
...
<body>
<div align=right>
<a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:navAnsClient('-1')"><<Previous</a>
<a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:window.print()">Print</a>
<a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:window.close()">Close window</a>
<a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascript
penHelpDoc('BkgrdInfo')">Background</a>
<a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascriptpenHelpDoc('Definitions')">Definitions</a>
<a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:navAnsClient('1')">Next Question>></a>
</div>
</body>
I recently changed the color of a.cssbtn to "blue", expecting to change the color of all the links shown. But only the third one (Close Window) changed colors. The other four retained their old color, which is defined in a:link. If I change a:link's color attribute to "blue", then all the links except Close Window change color.
I have two questions about that. 1) Why didn't all of the anchors change? They are all defined to the same class? 2) Why is a:link taking precedence of a.cssbtn? If I understand correctly, a.cssbtn is more specific and should take precedence.
Thanks much for your help.
-JeffThis CSS link pseudo order should be:
:link
:visited
:hover
:activei usually style a link in normal state and in hover stateHi, try:
a {text-decoration: none;}
a:link{color:#a62c3c}
a:active {color:#a62c3c}
a:visited {color:#a62c3c}
a:hover {color: #143974}
a.cssbtn, a.cssbtn:visited {color:blue; }
a.cssbtn:hover {color:red; cursor:hand; }
It seems to be the fact that you've defined the default colors for a:link after you defined the ones with the cssbtn class. (I'm not a CSS guru so I don't know the "why"), but changing the order like I did above seems to work.
Edit: And change the a:active attribute to below a:hover as Robert suggested, although I don't think that has anything to do with the problem that you're referring to about the links not being blue.Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element. <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classesOrdering">http://www.w3.org/TR/REC-CSS2/selector. ... esOrdering</a><!-- m --> it correctly made it work correctly (funny about that, eh?).
I still wonder, though, why my original incorrect order made the Close Window link work correctly, but not the other links even though all the links are defined identically?
Thanks all.
-Jeff
<style type="text/css">
a.cssbtn, a.cssbtn:visited {color:blue; }
a.cssbtn:hover {color:red; cursor:hand; }
a {text-decoration: none;}
a:link{color:#a62c3c}
a:active {color:#a62c3c}
a:visited {color:#a62c3c}
a:hover {color: #143974}
</style>
...
<body>
<div align=right>
<a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:navAnsClient('-1')"><<Previous</a>
<a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:window.print()">Print</a>
<a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:window.close()">Close window</a>
<a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascript
penHelpDoc('BkgrdInfo')">Background</a><a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascript
penHelpDoc('Definitions')">Definitions</a><a class="cssbtn" href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:navAnsClient('1')">Next Question>></a>
</div>
</body>
I recently changed the color of a.cssbtn to "blue", expecting to change the color of all the links shown. But only the third one (Close Window) changed colors. The other four retained their old color, which is defined in a:link. If I change a:link's color attribute to "blue", then all the links except Close Window change color.
I have two questions about that. 1) Why didn't all of the anchors change? They are all defined to the same class? 2) Why is a:link taking precedence of a.cssbtn? If I understand correctly, a.cssbtn is more specific and should take precedence.
Thanks much for your help.
-JeffThis CSS link pseudo order should be:
:link
:visited
:hover
:activei usually style a link in normal state and in hover stateHi, try:
a {text-decoration: none;}
a:link{color:#a62c3c}
a:active {color:#a62c3c}
a:visited {color:#a62c3c}
a:hover {color: #143974}
a.cssbtn, a.cssbtn:visited {color:blue; }
a.cssbtn:hover {color:red; cursor:hand; }
It seems to be the fact that you've defined the default colors for a:link after you defined the ones with the cssbtn class. (I'm not a CSS guru so I don't know the "why"), but changing the order like I did above seems to work.
Edit: And change the a:active attribute to below a:hover as Robert suggested, although I don't think that has anything to do with the problem that you're referring to about the links not being blue.Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element. <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classesOrdering">http://www.w3.org/TR/REC-CSS2/selector. ... esOrdering</a><!-- m --> it correctly made it work correctly (funny about that, eh?).
I still wonder, though, why my original incorrect order made the Close Window link work correctly, but not the other links even though all the links are defined identically?
Thanks all.
-Jeff