1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
---
title: Seletor de atributos
slug: Web/CSS/Attribute_selectors
translation_of: Web/CSS/Attribute_selectors
original_slug: Web/CSS/Seletor_de_atributos
---
<div>{{CSSRef}}</div>
<p>O <strong>seletor de atributos </strong>combina elementos baseado no valor de um atributo dado.</p>
<pre class="brush: css no-line-numbers">/* <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;
}</pre>
<dl>
<dt><code>[<em>attr</em>]</code></dt>
<dd>Representa um elemento com atributo de nome <em>attr</em>.</dd>
<dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
<dd>Representa um elemento com um atributo de nome <em>attr</em>, o qual o valor é exatamente <em>value.</em></dd>
<dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
<dd>Representa um elemento com um atributo de nome <em>attr, </em>o qual <em>value </em>é uma lista de palavras separadas por espaços, e uma dessas é exatamente <em>value.</em></dd>
<dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
<dd>Representa um elemento com um atributo de nome <em>attr </em> o qual o valor pode ser exatamente <em>value </em>ou pode começar com <em>value </em>imediatamente seguido por hífen <code>-</code> (U+002D). Isso somente é usado para linguagens que combinam sub-códigos.</dd>
<dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
<dd>Representa um elemento com um atributo com nome <em>attr </em>que tem um valor prefixado (precedido) por <em>value.</em></dd>
<dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
<dd>Representa um elemento com um atributo de nome <em>attr </em>que tem como sufixo (seguido) por <em>value.</em></dd>
<dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
<dd>Representa um elemento com um atributo de nome <em>attr </em>o qual valor contém ao menos uma ocorrência de <em>value </em>contido na string.</dd>
<dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt>
<dd>Adiciona um <code>i</code> (ou <code>I</code>) 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).</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Links">Links</h3>
<h4 id="CSS">CSS</h4>
<pre class="brush: 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;
}
</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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></pre>
<h4 id="Resultado">Resultado</h4>
<p>{{EmbedLiveSample('Links')}}</p>
<h3 id="Languages">Languages</h3>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: 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; }
</pre>
<p> </p>
<h4 id="HTML_2">HTML</h4>
<pre><code><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></code></pre>
<h4 id="Resultado_2">Resultado</h4>
<p>{{EmbedLiveSample('Languages')}}</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Adiciona um modificador para a seleção do valor do atributo ASCII </td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Definição Inicial</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibilidade">Browser compatibilidade</h2>
<p>{{Compat("css.selectors.attribute")}}</p>
|
