Add target="_blank" in CSS

Question

I have external links in the top menu of my website.

I want to open these links in new tabs. I could achieve it using target=_blank in HTML. Is there a similar CSS property or anything else?

I wouldn't think there would be a construct in CSS for this. Links and their targets are a construct of the HTML markup, or functionality within JavaScript code at most. CSS is about the visual styling, not so much about the behavior. — David, Jun 24 '13 at 17:35
This is what i am thinking. But just wanted to share with you guys,thanks David — Mubeen Ali, Jun 24 '13 at 17:38
@David but we already have things like `pointer-events`, which are just one step away from what Mubeen asks ;) — c69, Jun 24 '13 at 17:38
CSS3 defines hyperlink presentation. However, I have never used it or investigated its compatibility. http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#the-target-new — showdev, Jun 24 '13 at 17:38
@showdev: Interesting. I guess there are features in CSS3 which are invalidating "you can't do that in CSS" answers just like HTML5 has been invalidating a lot of "you can't do that in HTML" answers :) — David, Jun 24 '13 at 17:40
@showdev W3C Working Draft 24 February **2004** ... like many CSS specs, this had not taken off, too — c69, Jun 24 '13 at 17:41
@c69 True. According to [other answers](http://stackoverflow.com/questions/10025053/css-3-target-new-and-html5-target-blank-for-opening-in-new-tab#10025155), no browser has implemented css targets. — showdev, Jun 24 '13 at 17:44

Mojtaba Rezaeian · Answer 1 · 2015-12-30T16:47:49.977

109

As c69 mentioned there is no way to do it with pure CSS.

but you can use HTML instead:

use

<head>
    <base target="_blank">
</head>

in your HTML <head> tag for making all of page links which not include target attribute to be opened in a new blank window by default. otherwise you can set target attribute for each link like this:

    <a href="/yourlink.html" target="_blank">test-link</a>

and it will override

<head>
    <base target="_blank">
</head>

tag if it was defined previously.

edited Dec 30 '15 at 16:47

answered Jan 11 '14 at 18:16

Mojtaba Rezaeian

8,268
8
31
54

3

Nice! I had the same problem as the OP. WordPress theme that was opening links in the current tab. I edited the page HTML and threw in your code - didn't even know you COULD edit the head in that way in WP - and it worked! Awesome. – Matt West Nov 09 '15 at 04:31
3

It's been asked for CSS, this is not CSS! – EnzoR Feb 09 '17 at 11:49
1

In ASP.NET this did what I wanted but had the unintended consequence that my form created a new tab every time I posted back, so I had to set the 'target' of the form explicitly
– DJDave Nov 08 '17 at 12:04

score 46 · Accepted Answer · edited May 23 '17 at 11:55

46

Unfortunately, no. In 2013, there is no way to do it with pure CSS.

Update: thanks to showdev for linking to the obsolete spec of CSS3 Hyperlinks, and yes, no browser has implemented it. So the answer still stands valid.

edited May 23 '17 at 11:55

Community

1
1

answered Jun 24 '13 at 17:35

c69

19,951
7
52
82

10

There's no way to do it with CSS *period*. – cimmanon Jun 24 '13 at 17:37
3

Unfortunately? This is a behaviour, not a style. – Den Jan 09 '15 at 10:38
4

CSS has add this behavior "target-new:tab;" unfortunately all browsers sleep and have not implemented this behavior yet. Source: https://www.w3schools.com/cssref/css3_pr_target-new.asp – Marius Dec 24 '18 at 06:03
1

@Den - Suppose you're unsure if you want your website to open links in a new tab or the same tab by default, so you'd like to be able to change all your anchor tags in a central location in case you change your mind later. If you're building your site as part of some company's domain like Blogger, you may not have access to Mojtaba's `head` solution and would therefore rely on CSS styles. It's unfortunate to not be able to do this. – Kyle Delaney Jan 20 '20 at 01:14

mark stewart · Answer 3 · 2017-12-16T21:40:59.837

There are a few ways CSS can 'target' navigation. This will style internal and external links using attribute styling, which could help signal visitors to what your links will do.

a[href="#"] { color: forestgreen; font-weight: normal; }
a[href="http"] { color: dodgerblue; font-weight: normal; }

You can also target the traditional inline HTML 'target=_blank'.

a[target=_blank] { font-weight: bold; }

Also :target selector to style navigation block and element targets.

nav { display: none; }
nav:target { display: block; }

CSS :target pseudo-class selector is supported - caniuse, w3schools, MDN.

a[href="http"] { target: new; target-name: new; target-new: tab; }

CSS/CSS3 'target-new' property etc, not supported by any major browsers, 2017 August, though it is part of the W3 spec since 2004 February.

W3Schools 'modal' construction, uses ':target' pseudo-class that could contain WP navigation. You can also add HTML rel="noreferrer and noopener beside target="_blank" to improve 'new tab' performance. CSS will not open links in tabs for now, but this page explains how to do that with jQuery (compatibility may depend for WP coders). MDN has a good review at Using the :target pseudo-class in selectors

score 3 · Answer 4 · edited Mar 17 '16 at 16:51

3

Another way to use target="_blank" is:

onclick="this.target='_blank'"

Example:

<a href="http://www.url.com" onclick="this.target='_blank'">Your Text<a>

edited Mar 17 '16 at 16:51

alex

479,566
201
878
984

answered May 22 '14 at 05:50

Edison Q

79
1
2
8

19

if you are able to insert this `onclick` attribute, you could have just as well put `target='_blank'` directly, no? – Sergio Tulentsev Jan 31 '18 at 06:34
Thanks this helped me defeat bootstraps external class auto targeting _blank – Richard Varno Apr 21 '23 at 03:47

score 2 · Answer 5 · edited Jun 19 '19 at 12:41

2

This is actually javascript but related/relevant because .querySelectorAll targets by CSS syntax:

var i_will_target_self = document.querySelectorAll("ul.menu li a#example")

this example uses css to target links in a menu with id = "example"

that creates a variable which is a collection of the elements we want to change, but we still have actually change them by setting the new target ("_blank"):

for (var i = 0; i < 5; i++) {
i_will_target_self[i].target = "_blank";
}

That code assumes that there are 5 or less elements. That can be changed easily by changing the phrase "i < 5."

read more here: http://xahlee.info/js/js_get_elements.html

edited Jun 19 '19 at 12:41

iMath

2,326
2
43
75

answered Aug 21 '14 at 16:43

John Vandivier

2,158
1
17
23

Array.prototype.slice.call(document.querySelectorAll("a.someClass")).forEach(function(a) { a.target = "_blank"; }); – robert4 May 29 '15 at 17:34
1

@robert4 May as well pass it directly to `forEach()` than using `slice()` on it. – alex Mar 17 '16 at 16:52
1

or even `Array.from(document.querySelectorAll("a.something")).forEach((a) => { a.target = "_blank"; });` – alex Mar 17 '16 at 16:53

score 1 · Answer 6 · edited Jul 17 '23 at 20:53

1

While waiting for the adoption of CSS3 targeting by the major browsers, one could run the following sed command once the (X)HTML has been created:

sed -i 's|href="http|target="_blank" href="http|g' index.html

It will add target="_blank" to all external hyperlinks. Variations are also possible.

EDIT

I use this at the end of the makefile which generates every web page on my site.

edited Jul 17 '23 at 20:53

Şafak Gezer

3,928
3
47
49

answered Jun 11 '14 at 11:17

Serge Stroobandt

28,495
9
107
102

Add target="_blank" in CSS

6 Answers6

Linked

Related