Cleaning up links.

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Cleaning up links.

Post by RSteinwand »

Hi Albert,

I just got done cleaning up a bunch of junk hyperlink code.

Code: Select all

a.plainlink,a.plainlink:hover,#main a.plainlink,#main a.plainlink:hover{border:0;background:inherit;margin:0;padding:0}
Since a.plainlink defines all link states, the :hover code may not be needed.

Code: Select all

.jGrowl-notification a,.jGrowl-notification a:visited,.jGrowl-notification a:hover,.jGrowl-notification a:active{color:#fd0}
Again, since .jGrowl-notification a defines all link states, none of the other states are needed.

Then there's this mess. (Not my code.)

Code: Select all

a.aaButtonLinkA1,a.aaButtonLinkA1:link,a.aaButtonLinkA1:visited,a.aaButtonLinkA1:hover{margin:0;padding:3px 6px;border:0;transition:none}
Which could be simplified to just this, since a.aaButtonLinkA1 defines all the states:

Code: Select all

a.aaButtonLinkA1{margin:0;padding:3px 6px;border:0;transition:none}
What's your take on this?
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Cleaning up links.

Post by Albert Wiersch »

Hi Rick,

My initial though without doing any testing is that the link states (pseudo-classes) may be needed to provide the desired (higher) specificity. Without explicitly specifying the link states, the specificity will be lower which could affect the application of the rule.

Now a little testing...

For example, let's say you have this:

Code: Select all

a.plainlink:visited { color: red; }
a.plainlink { color: orange; }
The a.plainlink rule is not the same as a.plainlink:link,a.plainlink:active,a.plainlink:hover,a.plainlink:visited. The a.plainlink rule will not override the previous a.plainlink:visited rule and change a visited link to orange but it will if you change the a.plainlink rule to a.plainlink:link,a.plainlink:active,a.plainlink:hover,a.plainlink:visited.

This may help:
http://meyerweb.com/eric/css/link-specificity.html
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Cleaning up links.

Post by RSteinwand »

Hi Albert.

Sorry, your example isn't a good one b/c of the specificity you mentioned. More to less won't work.

This works fine in my testing:

Code: Select all

.main a,label{margin:0 -3px;padding:1px 3px;text-decoration:none;border:1px solid transparent;transition:background .5s ease-in,border .5s ease-in,color .5s ease-in;border-radius:3px;background-clip:padding-box !important;color:#25428e}
.main a:hover,.main a:active,label:hover{margin:0 -3px;padding:1px 3px;color:#fff;background:#334268;border:1px solid #89a4d2;border-radius:3px;background-clip:padding-box !important;cursor:pointer}
I don't know how you'd test for it tho.

You might like that link. It's similar to yours on your site. You can see it live here.
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Cleaning up links.

Post by Albert Wiersch »

RSteinwand wrote:Sorry, your example isn't a good one b/c of the specificity you mentioned. More to less won't work.
Yes, that was my point... more to less specificity won't work which is why you may need to specify (keep) the pseudo-classes (link, active, hover) in order for it to work the way you want... but of course it depends on what you want and the other CSS involved as to whether you really need the higher specificity obtained by using the pseudo-classes.
RSteinwand wrote:You might like that link. It's similar to yours on your site. You can see it live here.
Yes, I like that effect. I'd probably speed it up though... maybe .2 or .3 seconds instead of .5.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply