محددات الخاصية Attribute في CSS

تمتلك عناصر HTML ما يُسمى السمات أو الخاصيات Attributes التي تعطي تفاصيل أكبر عن العنصر الذي نوصِّفه. يمكننا استخدام محددات الخاصيات هذه في CSS لاستهداف عناصر تمتلك خاصية معينة، وهذا ما سندرسه في هذا المقال.

ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية:

أساسيات عمل الحاسوب
تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب
أساسيات التعامل مع الملفات
فكرة عن أساسيات لغة CSS.

محددات وجود الخاصية وامتلاكها لقيمة محددة

تتيح هذه المحددات اختيار عناصر HTML بناءً على مجرد وجود خاصية محددة في العنصر مثلًا الخاصية href، أو وجود الخاصية مع اشتراط امتلاكها لقيمة تتطابق كليًا أو جزئيًا مع قيمة محددة سلفًا.

المحدد	مثال	الوصف
`[attr]`	`a[title]`	يطابق العنصر المحدد الذي يمتلك الخاصية المذكورة بين القوسين المربعين.
`[attr=value]`	`a[href="https://example.com"]`	يطابق العناصر التي تمتلك الخاصية المذكورة عندما تتطابق قيمتها بالضبط مع القيمة المذكورة بين إشارتي التنصيص.
`[attr~=value]`	`p[class~="special"]`	يطابق العناصر التي تمتلك الخاصية المذكورة عندما تتطابق قيمتها مع القيمة المذكورة بين إشارتي التنصيص أو التي تحوي قيمتها القيمة الموجودة بين إشارتي التنصيص.
`[attr\|=value]`	`div[lang\|="zh"]`	يطابق العناصر التي تمتلك الخاصية المذكورة عندما تتطابق قيمتها مع القيمة المذكورة بين إشارتي التنصيص أو التي تبدأ قيمتها بالقيمة الموجودة بين إشارتي التنصيص تليها مباشرة شرطة (-).

نستعرض في المثال التالي الموجود في المحرر التفاعلي كيفية استخدام تلك المحددات.

li[class]‎: يطابق هذا المحدد جميع عناصر القائمة التي تمتلك الخاصية class. وسيطبق في المثال على جميع عناصر القائمة ما عدا الأول.
li[class="a"]‎: يطابق المحدد جميع عناصر القائمة التي تمتلك الخاصية class على أن تكون قيمتها a. ونظرًا لوجود فراغ كجزء من القيمة في العنصر الثالث، سيُطبَّق المحدد على عنصر القائمة الثاني فقط.
li[class~="a"]‎: يطابق المحدد جميع عناصر القائمة التي تمتلك الخاصية class على أن تكون قيمتها a أو أن تكون a جزءًا من قيمتها، لذا سيُطبّق المحدد على العنصرين الثاني والثالث في القائمة.

محددات الأجزاء النصية

تسمح لك هذه المحددات باستهداف الخاصيات بناء على وجود جزء من نص ضمن قيمة الخاصية. فلو كان لديك على سبيل المثال الصنفان box-warning وbox-error وأردت أن تستهدف كل شيء يبدأ بالعبارة "box-‎"، يمكنك في هذه الحالة استخدام القاعدة ["-class^="box] أو القاعدة ["class^="box] لاختيار كلا الصنفين السابقين.

المحدد	مثال	الوصف
`[attr^=value]`	`li[class^="box-"]`	يُطابق العناصر التي تملك خاصية تبدأ بالقيمة المذكورة بين القوسين المربعين والتي تلي المساواة.
`[attr$=value]`	`li[class$="-box"]`	يُطابق العناصر التي تملك خاصية تنتهي بالقيمة المذكورة بين القوسين المربعين والتي تلي المساواة.
`[attr*=value]`	`li[class*="box"]`	يُطابق العناصر التي تمتلك الخاصية المذكورة بين القوسين المربعين على أن تضم قيمتها القيمة التي تلي المساواة (=) في أي مكانٍ منها.

ملاحظة: كي نتمكن من تحديد مواقع معينة في السلسلة النصية الممررة فقد استخدمنا التعابير النمطية regular expressions مع المحرفين ^ الذي يعني بداية التعبير النمطي و$ الذي يعني نهاية التعبير، وبذلك يمكننا البحث عن نصوص تبدأ بنمط معين أوتنتهي بنمط معين.

نستعرض في المثال التالي الموجود في محرر الشيفرة التفاعلي تطبيق المحدد السابق:

li[class^="a"]‎: يُطابق أي خاصية تبدأ بالحرف a، وبالتالي سيُطبق التنسيق على أول عنصرين من عناصر القائمة.
li[class$="a"]‎: يُطابق أي خاصية تنتهي بالحرف a، وبالتالي سيُطبق التنسيق على العنصرين الأول والثالث.
li[class*="a"]‎: يُطابق أي خاصية يظهر الحرف a في أي موقع من قيمتها، وبالتالي سيُطبق التنسيق على جميع العناصر في القائمة.

مطابقة حالة الأحرف

إن أردت أن تطابق قيمة خاصية أو سمة ما دون أخذ حالة الأحرف الكبيرة أو الصغيرة بعين الاعتبار(case-insensitively)، بإمكانك أن تضع المحرف (أو الراية) i قبل قوس النهاية. تخبر هذه الراية المتصفح أن يُطابق بشكل غير حساس لحالة الأحرف ووفقًا لمحارف آسكي، وبدون وجودها سيطابقها المتصفح وفقًا لحالة المحارف التي تحددها لغة المستند ففي المستندات المكتوبة بلغة HTML ستكون المطابقة حساسة لحالة الأحرف.

لاحظ في المثال التالي كيف يُطابق المحدد الأول خاصية تبدأ قيمتها بالحرف الصغير a، وستكون النتيجة استهداف عنصر القائمة الأول فقط وجعل لون الخلفية background-color أصفر لأنّ العنصرين الآخرين يبدآن بحرف كبير A. بينما يستخدم المحدد الثاني الراية i ما يجعله غير حساس لحالة الأحرف وبالتالي سيطابق جميع عناصر القائمة ويغير لون الخط فيها للأحمر.

ملاحظة: ظهرت قيمة جديدة s تجبر المطابقة مع الانتباه لحالتي الأحرف عندما يكون السياق حساسًا لحالة الأحرف. لكن هذه الراية غير مدعومة كفاية من المتصفحات حاليًا، ولن تكون مفيدة جدًا في HTML.

ترجمة -وبتصرف- للمقال Attribute selectors