CSS/Attribute Selectors

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

المُحدِّد الآتي يُطابِق جميع عناصر <a> (بغض النظر عن قيمة هذه الخاصية):

a[title] {
  color: purple;
}

المُحدِّد الآتي يُطابِق جميع عناصر <a> التي تكون قيمة الخاصية href فيها تساوي https://example.org:

a[href="https://example.org"] {
  color: green;
}

المُحدِّد الآتي يُطابِق جميع عناصر <a> التي تحتوي قيمة الخاصية href فيها السلسلة النصية example:

a[href*="example"] {
  font-size: 2em;
}

المُحدِّد الآتي يُطابِق جميع عناصر <a> التي تنتهي قيمة الخاصية href فيها بالسلسلة النصية ‎.org:

a[href$=".org"] {
  font-style: italic;
}

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

[attr]

تحديد العنصر الذي له خاصية باسم attr.

[attr=value]

تحديد العنصر الذي له خاصية باسم attr، التي قيمتها تساوي value.

[attr~=value]

تحديد العنصر الذي له خاصية باسم attr، التي قيمتها قد تحتوي على قائمة مفصولة بفراغات من القيم، وإحدى تلك القيم تساوي value.

[attr|=value]

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

[attr^=value]

تحديد العنصر الذي له خاصية باسم attr، التي قيمتها تبدأ بالسلسلة النصية value.

[attr$=value]

تحديد العنصر الذي له خاصية باسم attr، التي قيمتها تنتهي بالسلسلة النصية value.

[attr*=value]

تحديد العنصر الذي له خاصية باسم attr، التي قيمتها تحتوي على السلسلة النصية value مرة واحدة على الأقل.

[attr operator value i]

إضافة الحرف i (أو I) قبل قوس الإغلاق يؤدي إلى مطابقة القيمة بغض النظر عن حالة الأحرف (case-insensitive).

أمثلة

مثال عن استخدام مُحدِّدات الخاصيات مع العنصر <a> لتحديد الروابط الداخلية (التي تبدأ برمز المربع #)، والروابط التي فيها الكلمة example، والروابط التي فيها الكلمة insensitive بغض النظر عن حالة الأحرف، والروابط التي تنتهي بالسلسلة النصية ‎.org:

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;
}

شيفرة 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>

مثال عن تحديد عناصر <div> التي تكون بلغات مختلفة:

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;
}

شيفرة 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>

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	مدعومة	مدعومة	7.0	9	3
تجاهل حالة الأحرف	49.0	47.0	غير مدعومة	36	9

مصادر ومواصفات

• مسودة Selectors Level 4.
• مواصفة Selectors Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.