الفرق بين المراجعتين ل"CSS/Attribute Selectors"

المراجعة الحالية بتاريخ 15:34، 28 يناير 2018

مُحدِّد الخاصيات (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;
}