تعلم تطوير الويب محددات الأصناف الزائفة pseudo-classes والعناصر الزائفة pseudo-elements في CSS

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

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

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

محددات الأصناف الزائفة pseudo-classes

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

تبدأ الأصناف الزائفة بالنقطتين المتعامدتين(:) كما بالشكل التالي:

:pseudo-class-name

مثال بسيط عن محددات الأصناف الزائفة

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

لكن الأمر قد يزيد صعوبة صيانة الشيفرة، فقد تُضاف فقرة جديدة إلى أعلى الصفحة وعليك عندها نقل الصنف إلى هذه الفقرة. وبدلًا من ذلك يمكننا استخدام محدد الأصناف الزائفة first-child: الذي يستهدف دائمًا الابن الأول في المقالة، ولا حاجة عندها لتعديل شيفرة HTML (وقد يكون أمر التعديل مستحيلًا نظرًا لوجود نظام إدارة محتوى يولّد هذه الشيفرة مثلًا ?

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

من الأصناف الزائفة أيضًا:

• ‎:last-child
• ‎:only-child
• ‎:invalid

ملاحظة: تُعد القاعدة التي تبدأ بصنف زائف وعنصر دون أية محددات عناصر تسبقها صحيحة.

إذ يمكنك كتابة القاعدة في المثال السابق على الشكل first-child: وعندها ستُطبّق على أي عنصر يكون ابنًا للعنصر <article> وليس فقط أول عنصر ابن يكون فقرة نصية. فكتابة المحدد first-child: تكافئ المحدد first-child:*، لكن لا بدّ أن تكون أكثر تحديدًا في أغلب الأحيان.

محددات أصناف زائفة مرتبطة بأفعال المستخدم

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

• hover:: وتُطبّق عندما يمرر المستخدم مؤشر الفأرة فوق عنصر وهذا العنصر المستهدف هو الرابط عادةً.
• focus:: وتُطبق عندما يعطي المستخدم تركيز الدخل إلى عنصر بالنقر عليه أو من خلال لوحة المفاتيح.

محددات العناصر الزائفة pseudo-elements

تسلك هذه المحددات سلوك محددات الأصناف الزائفة، وتعمل وكأنك أضفت عنصر HTML جديد إلى شيفرتك بدلًا من تطبيق صنف على عنصر موجود. تبدأ محددات العناصر الزائفة بنقطتين متعامدتين مزدوجتين (::).

::pseudo-element-name

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

لو أردت مثلًا أن تستهدف السطر الأول من فقرة ستتمكن من ذلك بتغليف هذا السطر داخل العنصر <span> ثم اختيار محدد عنصر. لكن ستفشل العملية إن كان عدد الكلمات التي تغلفها أكثر أو أقل من اتساع العنصر الأب. وطالما أننا لن نعرف بدقة عدد الكلمات التي ستقع في سطر واحد، إذ سيتغير العدد وفقًا لاتساع شاشة العرض، فمن الصعب التأكد من نجاح الأمر باستخدام شيفرة HTML فقط.

سينجز محدد العناصر الزائفfirst-line:: هذه العملية بسهولة، وسيطبق التنسيق على السطر الأول إن زاد أو قل عدد الكلمات.

يعمل المحدد السابق كعنصر <span> سحري يغلف السطر المطلوب وينسقه ويعدّل وضعه إن تغير طول السطر. لاحظ أيضًا كيف اختار السطر الأول من الفقرة الثانية أيضًا!

الجمع بين محددات الأصناف الزائفة ومحددات العناصر الزائفة

إن أردت أن تجعل خط الكتابة في أول سطر في أول فقرة نصية سميكًا يمكن ضم المحددين first-child: وfirst-line:: على التسلسل. حاول أن تعدّل الشيفرة في المثال السابق لتصبح على الشكل التالي:

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

تعني هذه القاعدة استهداف أول سطر لأول فقرة نصية <p> داخل العنصر <article>.

إنشاء محتوى باستخدام المحددين before:: و after::

يُستخدم المحددين السابقين مع الخاصية content لإدراج محتوى في ملف HTML باستخدام CSS. يعرض المثال التالي كيف تستخدم المحدد before:: والخاصية السابقة في إدراج النص الذي يمثل قيمة هذه الخاصية قبل محتوى العنصر الذي يمتلك الصنف box. كما يمكنك استخدام المحدد after:: لإدراج هذا النص في نهاية محتوى ذلك العنصر.

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

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

تُستخدم محددات العناصر الزائفة مرارًا في إدراج سلسلة نصية فارغة يمكن تنسيقها لاحقًا كأي عنصر من عناصر الصفحة.

أضفنا في المثال التالي سلسلة نصية فارغة باستخدام المحدد before:: ووضعنا داخله التصريح display: block لكي نتمكن من ضبط أبعاده. ثم استخدمنا بعد ذلك لغة CSS لتنسيقه كأي عنصر. حاول أن تغير في التنسيقات وتراقب ما الذي سيحدث!

يُدعى أسلوب إدراج المحتوى باستخدام before:: وafter:: مع الخاصية content في CSS بأسلوب "المحتوى المولَّد"، وسترى كثرة استخدام هذا الأسلوب في إنجاز مهام مختلفة. وعندما ترى هذين المحددين، ابحث عن الخاصية content وانظر إلى محتواها لتعرف ما سيُضاف إلى محتوى الصفحة.

مرجع إلى محددات الأصناف الزائفة والعناصر الزائفة

نقدم لك في الجدول التالي مرجعًا إلى أكثر المحددات السابقة شيوعًا ووصفًا لعمل كلٍ منها، كما ربطنا كل محدد بشرح إضافي له موجود على موسوعة حسوب.

محددات الأصناف الزائفة

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

محددات العناصر الزائفة

يمكنك الرجوع إلى صفحة محددات العناصر الزائفة في موسوعة حسوب للاطلاع على القائمة الكاملة بالتفصيل.

ترجمة -وبتصرف- للمقال pseudo-classes and pseudo-elements.

اقرأ أيضًا

• المقال السابق: محددات الخاصية Attribute في CSS
• 5 فئات زائفة (pseudo-class) يجب عليك معرفتها في CSS
• استخدام النماذج في HTML5 مع الأصناف الزّائفة (pseudo-classes) في CSS3
• تحريك شبه العناصر (pseudo-elements) في CSS