المحددات الزائفة (Pseudo-Classes & Elements)
كيفية التحكم في حالات العناصر (مثل عند تمرير الماوس) وإضافة محتوى دون الحاجة لتعديل HTML عبر العناصر الزائفة (Before / After).
1. تفاعل الماوس (:hover)
تغيير ستايل العنصر عند مرور مؤشر الماوس فوقه.
المعاينة
شرح الكود:
:hover: تُضاف بعد الكلاس لتنفيذ التنسيقات المتواجدة بداخلها فقط عندما يكون الماوس فوق العنصر.transition: all 0.3s;: يُضاف للعنصر الأساسي ليجعل التغيير في اللون أو الحجم سلساً تدريجياً، وليس فجائياً.
2. حالات الروابط (Link States)
الروابط `<a>` لها عدة حالات يمكن تخصيصها.
المعاينة
شرح الكود:
a:link: الرابط بشكله الطبيعي قبل الزيارة.a:visited: الرابط بعد أن يقوم المستخدم بزيارته (تفيد في إعلام المستخدم أنه دخل هذا الرابط مسبقاً).a:hover: عند تمرير الماوس فوق الرابط.a:active: لحظة النقر أو الضغط على الرابط بالماوس.- ملاحظة: يجب ترتيبهم بهذا التسلسل في ملف الـ CSS لكي يعملوا بشكل صحيح (LVHA: Link, Visited, Hover, Active).
3. العناصر الزائفة (::before & ::after)
إضافة محتوى إضافي (نصوص أو أشكال) قبل أو بعد محتوى العنصر الأساسي.
المعاينة
هذا مقال حصري ومهم جداً
شرح الكود:
::before: يضيف المحتوى داخل العنصر، ولكن في بدايته.::after: يضيف المحتوى داخل العنصر، ولكن في نهايته.content: "";: مهم جداً! لن تعمل هذه الخاصية إذا لم تضف `content`، حتى لو كان فارغاً (يُستخدم كثيراً لعمل أشكال مثل المربعات والمثلثات).