By القعقاع بن غزي 
توفر لغة CSS مجموعة من محددات العناصر Selectors التي تمكننا من دقة تحديد العنصر أو العناصر التي سنطبق عليها الأنماط، ولكن في بعض الأحيان قد تجد نفسك تكافح من أجل تطبيق نمط ما على عنصر الأخ الأول للطفل الثاني لعنصر يحتوي على خاصية ذات قيمة محددة، وأنا على يقين بأنك قد مررت بهذه المعضلة.
هذه المقالة ستكون مرجع سريع لمحددات الـ CSS بمختلف أنواعها “محددات الأنواع، محددات الأصناف، محددات الخاصيات” وغيرها من أنواع المحددات، وكيف نصل إلى عنصرما بشكل صحيح وبكل يسر وسلاسة.
محددات الأنواع “Type Selectors”
يستخدم هذا المحدد لمطابقة العناصر وفق اسم العقدة “DOM”، أي أنه يحدد جميع العناصر التي لها نوع معين في المستند، مثل p و div و span أو حتى العناصر المخصصة.
محددات الأصناف “Class Selectors”
يتم استخدامها لتحديد العناصر وفق قيمة الخاصية class التابعة لها، حيث يمكنك عند استخدامها تطبيق النمط على كافة العناصر التي تحمل نفس القيمة للخاصية class، كما في المثال التالي:
محددات الخاصيات “Attribute selectors”
يستخدم هذا المحدد لتحديد العناصر التي تحتوي على خاصية ما، أو كانت تحتوي على خاصية وهذه الخاصية تحوي قيمة معينة كما في المثال التالي:
في هذا المثال، يمكنك ملاحظة أنه في البداية قمنا بإنشاء محدد لجميع العناصر التي تحتوي على الخاصية name “بغض النظر عن قيمة هذه الخاصية”، بعد ذلك قمنا بإنشاء محدد أكثر دقة حيث قمنا بتحديد العناصر التي تحتوي على الخاصية name وتحمل القيمة age
يمكنك أيضاً استخدام صيغ مختلفة لمطابقة قيمة الخاصية، بخلاف استخدام علامة =
[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).
محددات المُعرِّفات “ID selectors”
يستخدم هذا المحدد لتحديد العناصر وفق قيمة الخاصية ID الخاصة بالعنصر، في هذا المحدد يجب تطابق اسمه مع قيمة الخاصية ID تماماً، كما في المثال التالي:
المحدد العام “Universal selector”
يستخدم هذا المحدد لتحديد جميع العناصر.
الأصناف الزائفة “Pseudo-class”
تستخدم الأصناف الزائفة لمطابقة المحتوى بطريقة أكثر شمولا، حيث أنها لا تشير إلى العناصر بشكل مباشر، بل تشير عادة إلى حالة العنصر، ونتيجة ذلك يتم تنفيذ النمط بناءاً على تفاعل المستخدم مع العنصر أو حدث معين، مثال الروابط، والروابط التي تم زيارتها وغيرها، والجدول التالي يوضح وظائف بعضها:
| :focus | العناصر (مثل عناصر النماذج) التي استقبل التركيز (foucs)، ويُفعَّل التركيز إذا ضغط المستخدم أو لمس أحد العناصر أو وصل إليه عبر مفتاح tab على لوحة المفاتيح. |
| :active | العناصر (مثل الأزرار) التي جرى تفعيلها من المستخدم. وعند استخدام الفأرة سيبدأ «تفعيل» العنصر عندما يضغط المستخدم على الزر الرئيسي لها وينتهي عند إفلات الضغط على ذاك الزر. |
| :hover | العناصر التي يتفاعل المستخدم معها مع جهاز تأشير لكن ليس بالضرورة أن يفعِّلها، ويُفعَّل هذا الصنف الزائف عادةً عندما يمر المستخدم بجهاز التأشير (الفأرة غالبًا) فوق العنصر. |
| :empty | أي عنصر ليس له أبناء، والأبناء يمكن أن تكون عقد عناصر (element nodes) أو عقدًا نصيةً (text nodes) بما في ذلك الفراغات. لن تؤثر التعليقات على اعتبار العنصر فارغًا أم لا. |
| :valid | أيّة عناصر <input>أو <form> التي نجح المتصفح بالتحقق من صحة محتوياتها. |
| :first-child | أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements). |
| :link | عنصرٌ لم تتم زيارته من قبل، ويُطابِق جميع عناصر <a> و <area> و <link> التي لها الخاصية hrefولم تتم زيارتها بعد. |
العناصر الزائفة “Pseudo-element”
تستخدم العناصر الزائفة للإشارة إلى محتوى أو عنصر غير موجود في الكود المصدري، أي المحتوى الذي يتم إنشاؤه بعد أو قبل عنصر معين، وللتوضيح أكثر دعونا نلقي نظرة على الجدول أدناه:
| ::after | هو آخر عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا. |
| ::before | هو أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا. |
| ::backdrop | هو صندوقٌ يُعرَض مباشرةً تحت أيّ عنصر معروض في وضع ملء الشاشة. |
| ::placeholder | يُمثِّل النص البديل في أحد عناصر النماذج <form>. |
| ::selection | يُمثِّل نصًّا في المستند الذي حدده المستخدم (باستخدام المؤشر مثلًا). |
| ::first-letter | يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية). |
| ::first-line | يؤدي إلى تطبيق الأنماط على أوّل سطر من العناصر الكتلية (block-level elements)، لاحظ أنَّ طول أوّل سطر يختلف تبعًا لعدة عوامل بما في ذلك عرض العنصر وعرض المستند وحجم الخط. |
المجمعات “Combinators”
يقصد هنا بالمجمعات هو تجميع عدة محددات وبمختلف أنواعها، وربطها مع بعضها للحصول على محدد أكثر تعقيداً ودقة. الأمثلة التالية توضح عمل وأنواع المجمعات:
مجمعات مجموعة المحددات (Group of selectors)
مجموعة من المحددات، يمكن استخدام هذا عندما تريد تطبيق نفس النمط على العديد من العناصر، لذلك بدلاً من إنشاء كتل مختلفة لكل عنصر يمكنك ببساطة سردها باستخدام , وكتابة النمط مرة واحدة.
مجمعات العناصر السليلة (descendant selector)
يُمثَّل عادةً بفراغٍ واحد ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.
مجمعات العناصر الأبناء (child combinator)
رمزه > ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.
مجمعات العناصر الأخوة المتجاورة (adjacent sibling combinator)
رمزه + ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا أتى مباشرةً بعد العنصر الأول وكان كلا العنصرين ابنًا لعنصر أب مشترك.
مجمعات العناصر الأخوة العامة (general sibling combinator)
رمزه ~ ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا أتى بعد العنصر الأول (وليس بالضرورة أن يأتي بعده مباشرةً)، وكان كلا العنصرين ابنًا لعنصر أب مشترك.