CSS exception on external link

**phipm1** · 07-19-2011, 07:16 PM

I currently have an external link icon put after each link created. I do not want an external link icon on Google links

/* CSS Code */

a[href^="http:"]
{
display:inline-block;
padding-right:14px;
background:transparent url(="extlink.gif) no-repeat 100% 0;
padding: 0 20px 0 0
}

a[href^="http:"] :hover:after { content: " > " attr (title);

a[href*="google"]{
background-image:none;
}
a[href*="google"] :hover:after { content: " "; }

I have also tried

a[href*="http://google"]{

this doesn't work either.

Anyone have any ideas?

**coothead** · 07-19-2011, 08:46 PM

Hi there phipm1,

and a warm welcome to these forums.

try it like this...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a  {
    display:inline-block;
    padding-right:14px;
    background:transparent url('http://www.coothead.co.uk/images/anim2.gif') no-repeat 100% 0;
    color:#000;
 }
a:hover:after  { 
    content: ">"; 
 }
a[href*="google"]  {
    background-image:none;
 }
a[href*="google"]:hover:after  { 
    content: " "; 
 }
</style>

</head>
<body>

<ul>
 <li><a href="http://www.google.com">google.com</a></li>
 <li><a href="http://www.dynamicdrive.com/">dynamicdrive.com</a></li>
 <li><a href="http://www.google.co.uk">google.co.uk</a></li>
</ul>

</body>
</html>

coothead

**phipm1** · 07-20-2011, 02:42 PM

Thanks so much, works great!!!

**coothead** · 07-20-2011, 03:26 PM

No problem, you're very welcome.

**phipm1** · 07-20-2011, 04:45 PM

how would you assign a attribute title to all links except the ones going to Google?

**coothead** · 07-20-2011, 09:47 PM

Hi there phipm1,

try it like this...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a:not([href*="google"]) {
    color:#f00;
 }
</style>

</head>
<body>

<ul>
 <li><a href="http//www.google.com">google.com</a></li>
 <li><a href="http://www.dynamicdrive.com/">dynamicdrive.com</a></li>
 <li><a href="http//www.google.co.uk">google.co.uk</a></li>
 <li><a href="http://www.bbc.co.uk/">bbc.co.uk</a></li>
</ul>

</body>
</html>

Obviously, this will only work in modern browsers.

Further reading:-

http://www.w3.org/TR/css3-selectors/#negation

coothead

**phipm1** · 07-21-2011, 02:13 PM

I want a hyperlink title "you are leaving" to show up automatically on all links, except the Google links.

Am I going about this the right way?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a {
display:inline-block;
padding-right:14px;
background:transparent url('http://www.coothead.co.uk/images/anim2.gif') no-repeat 100% 0;
color:#000;

}
a:hover:after {
content: ">";
}
a[href*="google"] {
background-image:none;
}
a[href*="google"]:hover:after {
content: " ";
}

a:not([href*="google"]) {
color:#f00;
}

</style>

</head>
<body class="add">

<p><a href="http://www.google.com" google.com</a></p>
<p>

<a href="http://www.yahoo.com/" yahoo.com</a></p>
<p>

<a href="http://www.google.co.uk" google.co.uk</a></p>
</body>
</html>

**coothead** · 07-21-2011, 05:44 PM

Hi there phipm1,

does this help...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a {
   color:#000;
 }
a:not([href*="google"]):before {
    content:'you are leaving to...';
    color:#f00;
 }
</style>

</head>
<body>

<ul>
 <li><a href="http//www.google.com">google.com</a></li>
 <li><a href="http://www.dynamicdrive.com/">dynamicdrive.com</a></li>
 <li><a href="http//www.google.co.uk">google.co.uk</a></li>
 <li><a href="http://www.bbc.co.uk/">bbc.co.uk</a></li>
</ul>

</body>
</html>

coothead

**phipm1** · 07-21-2011, 07:23 PM

I can't get the code to work for me. It doesn't show the title tags.

**coothead** · 07-21-2011, 08:22 PM

Hi there phipm1,

CSS is used to style HTML elements.

To add content to the HTML attributes requires serverside or client side scripting.

coothead

Thread: CSS exception on external link

Thread Tools

Search Thread

CSS exception on external link

The Following User Says Thank You to coothead For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions