Add target blank in CSS

Question

I have external links in top menu of my website   I want to open these links in new tab  I could achieve it using  target  blank  in HTML  Is there a similar CSS property or anything else

User · Answer

Another way to use target   blank  is   onclick  this target   blank     Example    lt a href  http   www url com  onclick  this target   blank   gt Your Text lt a gt

User · Answer

While waiting for the adoption of CSS3 targeting    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  quot http target  quot  blank quot  href  quot http g  index html  It will add target  quot  blank quot  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

User · Answer

As c69 mentioned there is no way to do it with pure CSS   but you can use HTML instead   use   lt head gt       lt base target   blank  gt   lt  head gt    in your HTML  lt head gt  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        lt a href   yourlink html  target   blank  gt test-link lt  a gt    and it will override   lt head gt       lt base target   blank  gt   lt  head gt    tag if it was defined previously

User · Answer

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  lt  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  lt  5    read more here  http   xahlee info js js get elements html

User · Answer

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

User · Answer

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

[html] Add target="_blank" in CSS

Examples related to html

Examples related to css

Examples related to hyperlink