logo hsb.horse
← Voltar para o índice de snippets

Snippets

Como usar seletores de atributo href no CSS

Snippet CSS que usa seletores de atributo no atributo href do elemento a, incluindo correspondência por prefixo, sufixo e substring.

Publicado: • Atualizado:
#css #selector #html

Traduções

Alemão Inglês Francês Japonês Coreano

Exemplo HTML

<ul>
  <li><a href="#top">TOP</a></li>
  <li><a href="https://developer.mozilla.org">mozilla</a></li>
  <li><a href="https://example.com">example</a></li>
  <li><a href="https://www.yahoo.co.jp">yahoo</a></li>
</ul>

Seletores de atributo básicos

/* Prefixo: começa com "#" */
a[href^="#"] {
  color: fuchsia;
}


/* Sufixo: termina com ".org" */
a[href$=".org"] {
  color: orange;
}


/* Substring: contém "example" */
a[href*="example"] {
  color: red;
}


/* Condição composta: começa com "https" e termina com ".jp" */
a[href^="https"][href$=".jp"] {
  color: green;
}

Lista de seletores

SeletorSignificado
[attr]O atributo existe
[attr="value"]Correspondência exata com value
[attr^="value"]Começa com value
[attr$="value"]Termina com value
[attr*="value"]Contém value

Ignorar maiúsculas e minúsculas (flag i)

Adicionando i ao final, a correspondência passa a ser insensível a maiúsculas e minúsculas.

/* Corresponde tanto a ".pdf" quanto a ".PDF" */
a[href$=".pdf" i]::after {
  content: " (PDF)";
}

Combinação com :not()

/* Aplica apenas a links externos (http/https) */
a[href^="http"]::after {
  content: " ↗";
}


/* Exclui links internos (#) */
a[href^="http"]:not([href*="example.com"])::after {
  content: " ↗";
}

Exemplo prático: ícones por tipo de arquivo

/* Adiciona rótulo a links PDF */
a[href$=".pdf" i]::after {
  content: " [PDF]";
  font-size: 0.75em;
  color: #c00;
}


/* Ícone de seta para links externos */
a[href^="https://"]:not([href^="https://example.com"])::after {
  content: " ↗";
}


/* Links âncora sem estilo */
a[href^="#"] {
  text-decoration: none;
}

Especificidade

A especificidade do seletor de atributo é a mesma do seletor de classe: (0, 1, 0).

a[href^="#"] { }   /* (0, 1, 0) — equivalente a classe */
a.internal { }     /* (0, 1, 1) — classe + elemento, este vence */