يطابق محدد خاصية CSS عناصر تستند إلى وجود أو قيمة لخاصية معينة.
/* <a> elements with a title attribute */
a[title] {
color: purple;
}
/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
color: green;
}
/* <a> elements with an href containing "example" */
a[href*="example"] {
font-size: 2em;
}
/* <a> elements with an href ending ".org" */
a[href$=".org"] {
font-style: italic;
}
[attr]
- يمثل عناصر ذات اسم خاصية attr.
[attr=value]
- يمثل العناصر التي تحتوي على اسم خاصية attr التي قيمتها هي ذات القيمة بالضبط.
[attr~=value]
- يمثل العناصر التي تحتوي على اسم خاصية attr التي تكون قيمتها قائمة كلمات مفصولة بمسافات بيضاء ، واحدة منها هي القيمة بالضبط.
[attr|=value]
- يمثل عناصر ذات اسم خاصية attr يمكن أن تكون قيمتها ذات قيمة بالضبط أو يمكن أن تبدأ بالقيمة مباشرة متبوعة بواصلة ، - (U + 002D).
- وغالبًا ما يتم استخدامه لمطابقة اللغة الفرعية.
[attr^=value]
- يمثل عناصر ذات اسم خاصية attr التي تكون قيمتة تماثل اول القيمة
- (يبحث عن تماثل في بداية القيمة).
[attr$=value]
- يمثل العناصر ذا اسم الخاصية attr التي تكون قيمته تماثل آخر القيمة
- (يبحث عن تماثل في نهاية القيمة)
[attr*=value]
- يمثل عناصر ذات اسم خاصية attr تحتوي قيمتها على تواجد واحد على الأقل للقيمة
- داخل قيمة الخاصية.
[attr operator value i]
- تؤدي إضافة حرف (i) أو (I) قبل قوس الإغلاق إلى مقارنة القيمة بحالة غير حساسة (للأحرف ضمن نطاق ASCII).
أمثلة
روابط
CSS
a {
color: blue;
}
/* "#" الروابط الداخلية ، تبدأ بـ*/
a[href^="#"] {
background-color: gold;
}
/* URL روابط مع "example" في أي مكان في عنوان */
a[href*="example"] {
background-color: silver;
}
/* URL روابط "غير حساسة" في أي مكان في عنوان ،
بغض النظر عن الكتابة بحرف كبير*/
a[href*="insensitive" i] {
color: cyan;
}
/* ".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>
Result
لغات
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;
}
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>
Result
مواصفات
مواصفات | الحالة | تعليق |
---|---|---|
Selectors Level 4 The definition of 'attribute selectors' in that specification. |
Working Draft | يضيف المعدل ل ASCII اختيار قيمة خاصية غير حساسة لحالة الأحرف |
Selectors Level 3 The definition of 'attribute selectors' in that specification. |
Recommendation | |
CSS Level 2 (Revision 1) The definition of 'attribute selectors' in that specification. |
Recommendation | التعريف الأولي |
توافق المتصفح
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
- Selecting a single element:
Document.querySelector()
,DocumentFragment.querySelector()
, orElement.querySelector()
- Selecting all matching elements:
Document.querySelectorAll()
,DocumentFragment.querySelectorAll()
, orElement.querySelectorAll()
- The above methods are all implemented based on the
ParentNode
mixin; seeParentNode.querySelector()
andParentNode.querySelectorAll()