Seletor de atributos

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

/* <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

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

<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

/* 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

<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 Status Comment
Selectors Level 4
The definition of 'attribute selectors' in that specification.
Rascunho atual Adiciona um modificador para a seleção do valor do atributo ASCII 
Selectors Level 3
The definition of 'attribute selectors' in that specification.
Recomendação  
CSS Level 2 (Revision 1)
The definition of 'attribute selectors' in that specification.
Recomendação Definição Inicial

Browser compatibilidade

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Attribute selector ([attr=value])Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 7Opera Full support 9Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes
Case-insensitive modifier (i)Chrome Full support 49Edge No support NoFirefox Full support 47IE No support NoOpera Full support 36Safari Full support 9WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 47Opera Android Full support YesSafari iOS Full support 9Samsung Internet Android Full support 5.0
Case-sensitive modifier (s)
Experimental
Chrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.