CSS селектор со ссылкой без целевого атрибута

Question

У меня есть два типа ссылок

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

и

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

Я могу использовать css для внешней ссылки, используя:

a[target="_blank"] 

Но я не знаю, как выбрать с помощью css all link без атрибута "target = _blank".

Я пытаюсь с a[target="_self"], но это не работает, потому что атрибут target не присутствует во "внутренней ссылке".

Answer 1

Вы можете использовать :not селектор

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>

Answer 2

Вы можете использовать :not() селектор в соответствии с другими ответами, или вы можете просто заставить CSS специфичность работать на вас:

• Использовать a {} селектордля нацеливания на все элементы привязки

• Теперь используйте a[target=_blank] {} для нацеливания на внешние ссылки

Теперь a {}селектор будет работать для тех селекторов, которые не внешние.

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

a {
  color: red;
}

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

Answer 3

Вы можете использовать селектор :not, см. здесь

Однако вместо этого может быть проще указать класс или идентификатор для вашей ссылки. Написание стиля для класса / элемента даст вам более точный контроль над каждым элементом.

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

CSS #someid {color: red}