/    Sign up×
Community /Pin to ProfileBookmark

Attribute sometimes overriden

Why is the color for a:link overriding the color for a.cssbtn? Why is it only doing it sometimes?

[CODE]<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=”javascript:navAnsClient(‘-1’)”>&lt;&lt;Previous</a>
<a class=”cssbtn” href=”javascript:window.print()”>Print</a>
<a class=”cssbtn” href=”javascript:window.close()”>Close window</a>
<a class=”cssbtn” href=”javascript:openHelpDoc(‘BkgrdInfo’)”>Background</a>
<a class=”cssbtn” href=”javascript:openHelpDoc(‘Definitions’)”>Definitions</a>
<a class=”cssbtn” href=”javascript:navAnsClient(‘1’)”>Next Question&gt;&gt;</a>
</div>
</body>[/CODE]

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.
-Jeff

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@Robert_WellockNov 02.2005 — This CSS link pseudo order should be:

:link

:visited

:hover

:active
Copy linkTweet thisAlerts:
@LiLcRaZyFuZzYNov 02.2005 — i usually style a link in normal state and in hover state
Copy linkTweet thisAlerts:
@kelly23Nov 02.2005 — Hi, 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.
Copy linkTweet thisAlerts:
@Robert_WellockNov 02.2005 —  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.[/quote] http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes
Copy linkTweet thisAlerts:
@JSchwarzauthorNov 02.2005 — Ordering 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
×

Success!

Help @JSchwarz spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...