Seletor de atributos
====================

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

### Links

#### 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
-----------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.