هذه الترجمة لم تكتمل. رجاءً ساعد بترجمة هذه المقالة من الإنجليزية.

يطابق محدد خاصية 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 التعريف الأولي

توافق المتصفح

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung 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

See also

Document Tags and Contributors

المساهمون في هذه الصفحة: zidanlab
آخر مَن حدّثها: zidanlab,