عرض مصدر CSS/Attribute Selectors

<noinclude>{{DISPLAYTITLE:محددات الخاصيات}}</noinclude>
مُحدِّد الخاصيات (attribute selector) في CSS يُطابِق العناصر إذ وجدت فيها خاصيةٌ ما أو كانت تلك الخاصية تملك قيمةً معيّنةً.

المُحدِّد الآتي يُطابِق جميع عناصر <code>[[HTML/a|&lt;a&gt;]]</code> (بغض النظر عن قيمة هذه الخاصية):<syntaxhighlight lang="css">
a[title] {
  color: purple;
}
</syntaxhighlight>المُحدِّد الآتي يُطابِق جميع عناصر <code>[[HTML/a|&lt;a&gt;]]</code> التي تكون قيمة الخاصية <code>href</code> فيها تساوي <code><nowiki>https://example.org</nowiki></code>:
<syntaxhighlight lang="css">
a[href="https://example.org"] {
  color: green;
}
</syntaxhighlight>
المُحدِّد الآتي يُطابِق جميع عناصر <code>[[HTML/a|&lt;a&gt;]]</code> التي '''تحتوي''' قيمة الخاصية <code>href</code> فيها السلسلة النصية <code>example</code>:
<syntaxhighlight lang="css">
a[href*="example"] {
  font-size: 2em;
}
</syntaxhighlight>المُحدِّد الآتي يُطابِق جميع عناصر <code>[[HTML/a|&lt;a&gt;]]</code> التي '''تنتهي''' قيمة الخاصية <code>href</code> فيها بالسلسلة النصية ‎<code>.org</code>:<syntaxhighlight lang="css">
a[href$=".org"] {
  font-style: italic;
}
</syntaxhighlight>

== صيغ المُحدِّدات ==

=== <code>[attr]</code> ===
تحديد العنصر الذي له خاصية باسم <code>attr</code>.

=== <code>[attr=value]</code> ===
تحديد العنصر الذي له خاصية باسم <code>attr</code>، التي قيمتها تساوي <code>value</code>. 

=== <code>[attr~=value]</code> ===
تحديد العنصر الذي له خاصية باسم <code>attr</code>، التي قيمتها قد تحتوي على قائمة مفصولة بفراغات من القيم، وإحدى تلك القيم تساوي <code>value</code>. 

=== <code>[attr|=value]</code> ===
تحديد العنصر الذي له خاصية باسم <code>attr</code>، التي قيمتها تساوي <code>value</code> أو تبدأ بالقيمة <code>value</code> وتتبعها مباشرةً شرطة <code>-</code>، وتُستخدَم هذه الصيغة غالبًا لمطابقة رموز اللغات الفرعية.

=== <code>[attr^=value]</code> ===
تحديد العنصر الذي له خاصية باسم <code>attr</code>، التي قيمتها تبدأ بالسلسلة النصية <code>value</code>. 

=== <code>[attr$=value]</code> ===
تحديد العنصر الذي له خاصية باسم <code>attr</code>، التي قيمتها تنتهي بالسلسلة النصية <code>value</code>. 

=== <code>[attr*=value]</code> ===
تحديد العنصر الذي له خاصية باسم <code>attr</code>، التي قيمتها تحتوي على السلسلة النصية <code>value</code> مرة واحدة على الأقل.

=== <code>[attr operator value i]</code> ===
إضافة الحرف i (أو I) قبل قوس الإغلاق يؤدي إلى مطابقة القيمة بغض النظر عن حالة الأحرف (case-insensitive).

== أمثلة ==
مثال عن استخدام مُحدِّدات الخاصيات مع العنصر <code>&lt;a&gt;</code> لتحديد الروابط الداخلية (التي تبدأ برمز المربع <code>#</code>)، والروابط التي فيها الكلمة <code>example</code>، والروابط التي فيها الكلمة <code>insensitive</code> بغض النظر عن حالة الأحرف، والروابط التي تنتهي بالسلسلة النصية ‎<code>.org</code>:<syntaxhighlight lang="css">
a {
  color: blue;
}

a[href^="#"] {
  background-color: gold;
}

a[href*="example"] {
  background-color: silver;
}

a[href*="insensitive" i] {
  color: saddlebrown;
}

a[href$=".org"] {
  color: red;
}
</syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="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>
</syntaxhighlight>مثال عن تحديد عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> التي تكون بلغات مختلفة:<syntaxhighlight lang="css">
div[lang] {
  font-weight: bold;
}

/* اللغة الإنكليزية */
div[lang~="en-us"] {
  color: blue;
}

/* اللغة البرتغالية */
div[lang="pt"] {
  color: green;
}

/* اللغة الصينية، سواءً كانت مبسطة أو تقليدية */
div[lang|="zh"] {
  color: red;
}

/* اللغة العربية */
div[lang="ar"] {
  color: purple;
}

</syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="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 lang="ar">أهلًا بالعالم!</div>
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|مدعومة
|مدعومة
|7.0
|9
|3
|-
!تجاهل حالة الأحرف
|49.0
|47.0
|غير مدعومة
|36
|9
|}
==مصادر ومواصفات==
*مسودة [https://drafts.csswg.org/selectors-4/#attribute-selectors Selectors Level 4].
*مواصفة [https://drafts.csswg.org/selectors-3/#attribute-selectors Selectors Level 3].
*مواصفة ‎[http://www.w3.org/TR/CSS2/selector.html#attribute-selectors CSS Level 2 (Revision 1)]‎.
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]