Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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 AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 7Opera Full support 9Safari Full support 3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung 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 49Edge Mobile No support NoFirefox Android Full support 47Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support

Etiquetas do documento e colaboradores

Colaboradores desta página: EvertonTomalok
Última atualização por: EvertonTomalok,