Seletor de atributos

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

O seletor de atributos combina elementos baseado no valor de um atributo dado.

css
/* <a> elementos com um atributo de título  */
a[title] {
  color: purple;
}

/* <a> elementos combinando com um href "https://example.org" */
a[href="https://example.org"]
{
  color: green;
}

/* <a> elementos com um href contendo "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elementos com href terminando em ".org" */
a[href$=".org"] {
  font-style: italic;
}
[attr]

Representa um elemento com atributo de nome attr.

[attr=value]

Representa um elemento com um atributo de nome attr, o qual o valor é exatamente value.

[attr~=value]

Representa um elemento com um atributo de nome attr, o qual value é uma lista de palavras separadas por espaços, e uma dessas é exatamente value.

[attr|=value]

Representa um elemento com um atributo de nome attr o qual o valor pode ser exatamente value ou pode começar com value imediatamente seguido por hífen - (U+002D). Isso somente é usado para linguagens que combinam sub-códigos.

[attr^=value]

Representa um elemento com um atributo com nome attr que tem um valor prefixado (precedido) por value.

[attr$=value]

Representa um elemento com um atributo de nome attr que tem como sufixo (seguido) por value.

[attr*=value]

Representa um elemento com um atributo de nome attr o qual valor contém ao menos uma ocorrência de value contido na string.

[attr operator value i]

Adiciona um i (ou I) antes do fechamento das chaves {}, faz com que o valor seja comparado sem levar em conta caixa alta ou caixa baixa(para caracteres dentro da faixa ASCII).

Exemplos

CSS

css
a {
  color: blue;
}

/* Links internos, começando com "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links com "example" em qualquer lugar da URL */
a[href*="example"] {
  background-color: silver;
}

/* Links com "insensitive" em qualquer lugar da URL,
   independentemente da capitalização */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links com final ".org" */
a[href$=".org"] {
  color: red;
}

HTML

html
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

Resultado

Languages

CSS

css
/* Todas divs com um atributo `lang` em negrito. */
div[lang] {
  font-weight: bold;
}
/* Todas divs com US English em azul (blue). */
div[lang~="en-us"] {
  color: blue;
}
/* Todas divs onde Portuguese esta em verde (green). */
div[lang="pt"] {
  color: green;
}
/* Todas divs onde Chinese esta em vermelho (red), Simplificado para (zh-CN) ou tradicional (zh-TW). */
div[lang|="zh"] {
  color: red;
}
/* Todas divs com Traditional Chinese `data-lang` que é purple. */
/* Nota: Você também poderia usar atributos separados por hífen com aspas duplas */
div[data-lang="zh-TW"] {
  color: purple;
}

HTML

html
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好!</div>
<div lang="zh-TW">世界您好!</div>
<div data-lang="zh-TW">?世界您好!</div>

Resultado

Especificações

Specification
Selectors Level 4
# attribute-selectors

Browser compatibilidade

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Attribute selector ([attr=value])
Case-insensitive modifier (i)
Case-sensitive modifier (s)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.