How to specify an attribute in an HTML class?

Question

I am wondering how to make a class such that all links that are part of that class have no decoration (underline) and open in a new tab. I'm doing this so I don't have to write text-decoration:none target="_blank" in each of my 'a' tags.

I have this code for my class:

    <style>
        A.fresh{
            text-decoration:none;
            target="_blank";
        }
    </style>

But it doesn't like the target="_blank"; VS Code says it's expecting ':' instead of the '='. I'm pretty sure this can be done simply in javascript, but I'd like to know how to fix this error as well. Thanks!

(Sorry for the super basic question, I'm just learning HTML today.)

css or style tags can't handle target="_blank" but you could set all links in the html to have the target="_blank" or use the below JS. — FujiRoyale, Dec 21 '19 at 02:21

score 1 · Answer 1 · answered Dec 21 '19 at 02:17

1

Use JS.

Insert a script tag into your HTML code like so:

<script>
document.querySelectorAll("a.fresh").setAttribute("target", "_blank");
</script>

answered Dec 21 '19 at 02:17

sportzpikachu

831
5
18

Loi Nguyen Huynh · Accepted Answer · 2019-12-21T03:11:15.537

There is no way to set target="_blank" with pure CSS yet
But you can do it easily with javascript: document.querySelectorAll("a.fresh").forEach(a => a.setAttribute("target", "_blank"));

Here's the code:

document
.querySelectorAll("a.fresh")
.forEach(a => {
  a.setAttribute("target", "_blank")
});

a.fresh {
  text-decoration: none;
}

<a class="fresh" href="https://www.google.com/">link1</a>
<a class="fresh" href="https://www.google.com/" target="_blank">link2</a>

https://jsfiddle.net/am80793v/

How to specify an attribute in an HTML class?

2 Answers2