CSS Link Attribute to All except Two
I am trying to add an icon to the end of all external links to my site, with the exception of the links that appear in the website's footer (one link).
The code I'm using is as follows:
Is there any way to just identify one link to exclude from this style or am I going to have to add a class identifier to all of my external links to get this to do what I want it to do? If I can exclude the footer link, how would I go about doing that?
The code I'm using is as follows:
a[href^='http://'] {
background: url('..images/icons/globe.png') no-repeat right center;
padding-right: 20px;
margin-right: 10px;
}Is there any way to just identify one link to exclude from this style or am I going to have to add a class identifier to all of my external links to get this to do what I want it to do? If I can exclude the footer link, how would I go about doing that?
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
I didn't forget, I understood the question to be to exclude any link(s) in the footer.
But you're probably right to use :not, IE8 doesn't recognise "href^=" so I guess CSS3 support is already assumed/needed.
But you're probably right to use :not, IE8 doesn't recognise "href^=" so I guess CSS3 support is already assumed/needed.
I assumed not external links in the footer...but you know what assumption is...
IE8 should recognise href^=
IE8 should recognise href^=
ASKER
Thanks for both of these, I'll try them when I get back to the office.
Always a jQuery/CSS option (if you're using the library anyway!)
$('a[rel=external]').addCl
+
.external { ... }
$('a[rel=external]').addCl
+
.external { ... }
...if they have rel set...
ASKER
This worked perfectly for what I was needing, thanks so much.
a[href^='http://']:not(#footer a[href^='http://']){
else (robert forgot the external target)
#footer a[href^='http://'] {