CODEWITHSUNDEEP
htmlcsscss-selectors
natas
natas

Reputation: 456

CSS selector with link without target attribute

I've two types of links

<a href="url">Internal Link</a>

and 

<a href="url" target="_blank">External Link</a>

I'm able to use css on external link using:

a[target="_blank"]

But I don't know how to select with css all link without "target=_blank" attribute.

I try with a[target="_self"] but It not works because target attribute is not present in the "internal link".

Upvotes: 2

Views: 3592

Answers (3)

Nick Hu
Nick Hu

Reputation: 46

You could use the :not selector see here

However, it might be easier to give either a class or a ID to your link instead. Writing the style for a class/element will give you finer control over each element.

HTML <a id="someid" href="https://link.com" />

CSS #someid {color: red}

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

You can use :not() selector as per the other answers, or you can just make CSS specificity work for you:

  • Use a {} selector to target all anchor elements

  • Now use a[target=_blank] {} to target the external links

Now the a {} selector will work for those selectors that are not external.

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

a {
  color: red;
}
<a href="url">Internal Link</a>
<a href="url" target="_blank">External Link</a>

Upvotes: 0

arvie
arvie

Reputation: 761

You could use the :not selector

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

a:not([target="_blank"]) {
  color: purple;
}
<p>
    <a href="url" target="_blank">External Link</a> 
</p>
<p>
    <a href="url">Internal Link</a>
</p>

Upvotes: 5

Related Questions