Pseudo-classes في CSS: استهداف الحالات والعناصر الذكية - العدد #41

1. التفاعل مع المستخدم: :hover و :active

:hover

تُستخدم هذه الفئة لاستهداف العنصر عندما يمر المستخدم فوقه بمؤشر الفأرة أو القلم:

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

:active

تُستخدم لاستهداف العنصر أثناء الضغط عليه، سواء بالفأرة أو الإصبع أو القلم:

💡 نصيحة مهمة: ضع جميع الأنماط الأساسية في المحدد الأساسي (button مثلًا)، ثم أضف فقط التغييرات في :hover و:active لتسهيل الصيانة.

2. استهداف العناصر حسب موقعها: :first-child, :last-child, :nth-child()

:first-child

يستهدف العنصر الأول داخل الحاوية:

:last-child

يستهدف العنصر الأخير داخل الحاوية:

:nth-child()

يتيح لك استهداف العناصر بناءً على ترتيبها:

3. :first-of-type: دقة أكثر في الاستهداف

تُستخدم لاستهداف أول عنصر من نوع معين داخل الحاوية، حتى لو لم يكن هو أول طفل:

4. أدوات المطور (DevTools): صديقك في التجربة والتصحيح

يمكنك استخدام DevTools في المتصفح لتجربة هذه الحالات، ومعرفة متى يتم تفعيلها، خاصة في حالات التفاعل مثل :hover و:active.

خلاصة

• Pseudo-classes تمنحك تحكمًا ذكيًا في استهداف العناصر بناءً على الحالة أو الموقع.
• استخدمها بحكمة لتحسين تجربة المستخدم دون الحاجة لتعديل HTML.
• لا تنسَ اختبار التفاعل على الأجهزة المختلفة، خاصة الهواتف المحمولة.