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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
---
title: انتخابگر ویژگی
slug: Web/CSS/انتخابگرـویژگی
translation_of: Web/CSS/Attribute_selectors
---
<div>{{CSSRef}}</div>
<p dir="rtl"><strong>انتخابگر ویژگی</strong> بر اساس وجود ویژگی یا مقدار ویژگی انتخاب میکند.</p>
<pre class="brush: css no-line-numbers">/* را داشته باشند title که ویژگی <a> عنصرهای */
a[title] {
color: purple;
}
/* باشد "https://example.org" آن برابر با href که ویژگی <a> عنصرهای */
a[href="https://example.org"] {
color: green;
}
/* باشد "example" آن در بردارندهی href که ویژگی <a> عنصرهای */
a[href*="example"] {
font-size: 2em;
}
/* به پایان رسیده باشد ".org" آن با href که ویژگی <a> عنصرهای */
a[href$=".org"] {
font-style: italic;
}</pre>
<dl>
<dt><code>[<em>attr</em>]</code></dt>
<dd>Represents elements with an attribute name of <em>attr</em>.</dd>
<dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
<dd>Represents elements with an attribute name of <em>attr</em> whose value is exactly <em>value</em>.</dd>
<dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
<dd>Represents elements with an attribute name of <em>attr</em> whose value is a whitespace-separated list of words, one of which is exactly <em>value</em>.</dd>
<dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
<dd>Represents elements with an attribute name of <em>attr</em> whose value can be exactly <em>value</em> or can begin with <em>value</em> immediately followed by a hyphen, <code>-</code> (U+002D). It is often used for language subcode matches.</dd>
<dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
<dd>Represents elements with an attribute name of <em>attr</em> whose value is prefixed (preceded) by <em>value</em>.</dd>
<dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
<dd>Represents elements with an attribute name of <em>attr</em> whose value is suffixed (followed) by <em>value</em>.</dd>
<dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
<dd>Represents elements with an attribute name of <em>attr</em> whose value contains at least one occurrence of <em>value</em> within the string.</dd>
<dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt>
<dd>Adding an <code>i</code> (or <code>I</code>) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h3 id="Links">Links</h3>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">a {
color: blue;
}
/* Internal links, beginning with "#" */
a[href^="#"] {
background-color: gold;
}
/* Links with "example" anywhere in the URL */
a[href*="example"] {
background-color: silver;
}
/* Links with "insensitive" anywhere in the URL,
regardless of capitalization */
a[href*="insensitive" i] {
color: cyan;
}
/* Links that end in ".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="Result">Result</h4>
<p>{{EmbedLiveSample('Links')}}</p>
<h3 id="Languages">Languages</h3>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">/* All divs with a `lang` attribute are bold. */
div[lang] {
font-weight: bold;
}
/* All divs in US English are blue. */
div[lang~="en-us"] {
color: blue;
}
/* All divs in Portuguese are green. */
div[lang="pt"] {
color: green;
}
/* All divs in Chinese are red, whether
simplified (zh-CN) or traditional (zh-TW). */
div[lang|="zh"] {
color: red;
}
/* All divs with a Traditional Chinese
`data-lang` are purple. */
/* Note: You could also use hyphenated attributes
without double quotes */
div[data-lang="zh-TW"] {
color: purple;
}
</pre>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: 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>
</pre>
<h4 id="Result_2">Result</h4>
<p>{{EmbedLiveSample('Languages')}}</p>
<h2 id="Specifications">Specifications</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>Adds modifier for ASCII case-insensitive attribute value selection</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>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.selectors.attribute")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>Selecting a single element: {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, or {{domxref("Element.querySelector()")}}</li>
<li>Selecting all matching elements: {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, or {{domxref("Element.querySelectorAll()")}}</li>
<li>The above methods are all implemented based on the {{domxref("ParentNode")}} mixin; see {{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li>
</ul>
|
