954,193 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

CSS link target

Hi all,

How do I make a link with the class of "externallink" open in a new window using css? Here is my current style for "externallink" class:

a.externallink:link { 
color: #FF99FF;
text-decoration: none;
}


Thanks!!

Max. :cheesy:

MaxMumford
Posting Whiz in Training
228 posts since Oct 2006
Reputation Points: 32
Solved Threads: 3
 

http://www.w3.org/TR/css3-hyperlinks/

god only knows which browsers are using CSS3 yet; and even then, I wouldn't rely on it working until everyone's upgraded all of their browsers.

I stick with IE6; and I have no plans to change that on dev workstations until it isn't the most common browser for users...

MattEvans
Veteran Poster
Moderator
1,386 posts since Jul 2006
Reputation Points: 522
Solved Threads: 64
 

ok thanks. ill put the code in anyway. do you know it?

MaxMumford
Posting Whiz in Training
228 posts since Oct 2006
Reputation Points: 32
Solved Threads: 3
 

did you see the link in that post?

i guess it would be something like:

a.externallink:link { 
  target-name: new;
  target-new: window;
}


or (exclusive)...

a.externallink:link { 
  target: new window;
}


the stuff outlined at that location ( http://www.w3.org/TR/css3-hyperlinks/ ) is a working draft... that means it isn't necessarily going to end up like that in the official CSS3 spec when it's done.

personally, i'd stick with the target='_blank' or target='' method until/unless that spec is implemented in at least one popular browser...

MattEvans
Veteran Poster
Moderator
1,386 posts since Jul 2006
Reputation Points: 522
Solved Threads: 64
 

i imagine that you wouldn't need the :link psuedoclass on that selector when/if it is implemented.. so it'll just be:

a.externallink{...}

MattEvans
Veteran Poster
Moderator
1,386 posts since Jul 2006
Reputation Points: 522
Solved Threads: 64
 

ok cool thanks :) so if i just put

a.externallink {
target-name: new;
target-new: window;
}

will that style it for a:link a:hover a:visited and a:active? also, can i put a:externallink:link etc after it and the open in new window script and styles will work with it?


Max.

MaxMumford
Posting Whiz in Training
228 posts since Oct 2006
Reputation Points: 32
Solved Threads: 3
 

Well. All style rules for the class a.externallink will be applied during the 'pseudoclass states' (a.externallink:link a.externallink:hover a.externallink:active and a.externallink:visited) unless style rules defined for those pseudoclasses overide rules defined for the class.

Putting the definition for CSS3 target properties in a pseudoclass might cause seemingly erratic behaviour; I don't know whether a:link and a:visited are mutually exclusive... if they are, and you put the definition in :link, then your links would only open in a new window the first time they are visited.

I don't know whether the :hover state is dropped when a link is clicked: If it is, and you put the link in :hover or :active; your links would only open in a new window until they are clicked... i.e. never =P

MattEvans
Veteran Poster
Moderator
1,386 posts since Jul 2006
Reputation Points: 522
Solved Threads: 64
 

lol ok to be honest ill just manually make the link's targets _blank :P Thanks a lot though.. learned a lot :D

MaxMumford
Posting Whiz in Training
228 posts since Oct 2006
Reputation Points: 32
Solved Threads: 3
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You