Adding a class to all links with a target of _blank

JavaScript
1

Could someone show me how to do this? Thanks!

2

yeah, I caught that.

3

This one is using jQuery, download and reference it properly.

Referencing jQuery


<script src="jquery-1.4.min.js"  type="text/javascript"></script>

Full Code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    
    <style type="text/css">
        .someClass{ color: red; }
    </style>

    <script src="jquery-1.4.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
        $(document).ready(function() {
            $('a[target="_blank"]').addClass("someClass");
        });
    
    </script>

</head>

<body>

    <a href="" target="_blank">with target blank, css class assigned</a>
    <br><br>
    <a href="">without target blank</a>

</body>

</html>
4

I had assumed that it was to add equivalent support for IE6 users where that CSS isn’t supported.

5

Whoops, yes! The value needs to match that of the attribute being selected but it’s a great way to avoid unnecessary classes, ID’s and scripts! :slight_smile:

6

Need to add _ to target:

 
a[target="_blank"] { color: green;}

Learned some thing new, Thanks!

7

Yes I am serious, here’s the link to the relevant part of the CSS 2.1 specification: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Support is buggy but it does work in IE7+ and all other browsers (pretty well too): http://reference.sitepoint.com/css/attributeselector

8

are you serious? what is the browser support for this?

9

Am I the only person wondering why the heck you’re using JavaScript at all?

This can be done easily and quickly with CSS itself (and you can put the code in the relevant selector.

a[target="blank"] {
      Your CSS Here.
}
10

Thanks guys, just used the first example and it worked like a charm. Thanks tahirjadoon!

11

Why use jQuery when the plain JavaScripot version is as short as the code you need to use to call the huge jQuery library just to do the same thing.

This particular example is one where you’d be better off ignoring jQuery even if you already had it loaded in the page since the plain JavaScript code is going to run faster by not needing to make function calls.

12 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    
    <style type="text/css">
        .someClass{ color: red; }
    </style>

</head>

<body>

    <a href="" target="_blank">with target blank, css class assigned</a>
    <br><br>
    <a href="">without target blank</a>

    <script type="text/javascript">
        var a = document.getElementsByTagName('a');
        for (i in a) {
            if(a[i].target == '_blank')
                a[i].className = 'someClass';
        }
    </script>

</body>

</html>
13

no problem.