العناصر الزائفة في CSS

المحددات الزائقة العلائقية والمتعلقة بالمحتوى

مزيد من الإثارة وحلول غير متوقعة

تقديم

كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)

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

المحدات الزائفة العلائقية Relational Pseudo Classes

المحددات الزائفة العلائقية أو الشرطية، أي أن المحدد الزائف سيعمل وكأنه جملة شرطية، إذا تحققت سيتم تطبيق التنسيق الموجود بين الأقواس.

١- المحدد الزائف :not()

المحدد في CSS يقوم بإستهداف مجموعة من العناصر في HTML ماذا لو أردت استثناء عنصر معين من هذة المجموعة؟
هنا تأتي أهمية المحدد الزائف :not() بين القوسين سيكون هناك محدد آخر، سواء كان محدد بسيط (class, Id , type) أو حتى محدد زائف آخر.

نريد تعين الخط بالحجم 1.4em لكل القطع النصية <p> ما عدا القطة ذات الفئة diff
يمكننا فعل ذلك ببساطة بإستخدام المحدد الزائف :not()

مثال أخر: لدينا مجموعة من الأزرار ونريد تطبيق بعض التنسيقات على جميع الأزرار ما عدا الزر الذي في حالة عدم التنشيط disabled

الزر الثالث يحتوي على الخاصية disabled، لاحظ أنه عند استخدام الخواص في CSS نقوم بوضعها داخل قوسمين مربعين، فعلى سبي المثال إذا كنت تريد تحديد جميع الروابط التشعيبية التي تحتوي على الخاصية href، نستخدم هذا المحدد:

وهكذا عندما نريد استثناء بعض العناصر بواسطة أحد خواصه، نقوم بوضعها داخل قوسين مربعين داخل المحدد الزائف :not() ويكون المحدد كالتالي:

أي سيتم تعين حجم الخط ب 20px لجميع الأزرار ما عدا الزر الغير نشط.
مثال آخر:
لدينا قائمة غير مرتبه <ul> تحتوي على عدد من العناصر <li> ونريد رسم خط أسفل جميع العناصر ما عدا أخر عنصر.

يكون المحدد كالتالي:

هنا قمنا باستخدام محدد زائف أخر :last-child داخل المحدد :not() أي أنه سيقوم بتحديد جميع عناصر القائمة <li> ما عادا أخر عنصر في القائمة.

٢- المحدد الزائف :empty

يقوم هذا المحدد باستهداف العناصر التي لا تحتوي على نصوص أو عناصر أبناء.

في بعض الحالات تريد إخفاء العناصر الفاغة، فيمكنك فعل ذلك باستخدام المحدد :empty هكذا

بهذة القاعدة يتم حذف جميع العناصر الفارغة من صفحة الويب.

المحدات الزائفة المتعلقة بالمحتوى Content-related Pseudo Classes

المحددات الزائفة المتعلقة بالمحتوى، تقوم بوظيفة مختلفة عن باقي المحددات الزائفة، حيث أن جميع المحددات الزائفة في الغالب تقوم بتحديد عنصر أو حالة عنصر لنقوم بتطبيق بعض التنسيقات عليه، أم هنا فسيقوم المحدد بإنشاء العنصر ثم بعد ذلك تطبيق التنسيقات الملطلوبة عليه.
يوجد محددين فقط يمكنك استخدامهم لإضافة محتوى من خلال لغة CSS ، المحدد الزائف :before والمحدد الزائف :after

١- المحدد الزائف :before

كما هوا ظاهر من اسم المحدد كالعادة، فإنه سيقوم بإضافة المحتوى كأول عنصر دخل العنصر المُحدد، المحتوى المضاف يكون من النوع inline بشكل إفتراضي.
تخيل أن لدينا العنصر <div> ويوجد داخله ثلاثة عناصر <span> و <em> و <span> عندما نقوم بإستخدام المحدد :before لإضافة محتوى جديد داخل العنصر <div> سيقوم بإضافته كأول عنصر داخل العنصر <div> هكذا:

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

لإضافة المحتوى يجب استخدام الخاصية content ، دعنا نقوم بمثال توضيحي:
غالباً ما يتم إضافة علامات التنصيص المزدوجة  أو المنفردة  قبل الإقتباسات، كي تظهر بشكل مميز عن باقي العناصر في صفحة الويب.، نستخدم العنصر blockquote لإضافة الإقتباسات في HTML هكذا:

الآن سنقوم بإضافة علامات التنصيص من خلال CSS بإستخدام المحدد الزائف :before والخاصية content هكذا:

ولان المحتوى المَُضاف بإستخدام المحددات الزائفة لا يتم إدراجة داخل شجرة عناصر المحتوى، فعندما تقوم بفحص العنصر بإستخدام أداة فحص العناصر الخاصة بالمطورين browser’s dev tools في متصفح Chrome سيظهر العنصر بالشكلة التالي:

أداة فحص العناصر في متصفح chrome لا يمكن لأي مطور ويب الإستغناء عنها، حيث يمكنك مشاهدة أكواد HTML و CSS وعند مرور مؤشر الفأرة على العنصر، يتم الإشارة إليه في صفحة الويب (كما في الصور بالإعلى)، إن شاء الله في مقالات لاحقة سنقوم بشرح مفصل لهذة الأداة، أما الآن يمكنك أخذ نظرة سريعة عنها من هنا

لاحظ أننا استخدمنا القيمة الكودية لعلامة التنصيص كقيمة للخاصية content

لا يمكن استخدام المحدد :before بدون استخدام الخاصية content حتى لو بدون قيمة، ففي حالات كثيرة تستخدم المحددات الزائفة المتعلقة بالمحتوى لإضافة خلفيات لجزء معين من العنصر، أو الحصول على نتيجة لا يمكن الحصول عليه بإستخدام العنصر بمفرده.

المثال الثاني:

لدينا قائمة من العناصر الغير مرتبة <ul> هكذا:

ونريد وضع صورة أمام كل عنصر لتظهر بهذا الشكل:


نقوم بوضع علامة صح أما العناصر بإستخدام المحدد الزائف :before وتكون قيمة الخاصية content في هذة الحالة عبارة عن صورة:

المثال الثالث:

إضافة أسهم بجانب العناصر في القوائم المنسدلة.

الأسهم البيضاء بجانب العناصر في القائمة الرئيسية للموقع، نقوم باستخدام المحدد الزائف :before لإضافتها، رسم السهم بهذا الشكل يتم عمله بطريقة مختلفة في CSS حيث لا يمكنك رسم عنصر بثلاثة أضلاع فقط في CSS ولكن نستخدم الخاصية border بطريقة مبتكرة لنتمكن من رسم الأسهم، هذة الآداة تساعدك في رسم الأسهم بأبعاد وألوان مختلفة:

ثم قم بنسخ التنسيقات الخاصة به ولصقه في ملف التنسيقات لديك.

هذا المقال يساعدك في فهم كيفية رسم الأسهم في CSS

١- المحدد الزائف :after

يعمل بالضبط مثل المحدد الزائف :before ، لكنه يقوم بإضافة المحتوى في نهاية العنصر وليس في أوله هكذا:

أشرف عبدالدايم

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