Pseudo-elements في CSS: استهداف أجزاء من العناصر دون تعديل HTML - العدد #44

ما هو الـ Pseudo-element؟

الـ Pseudo-element هو كلمة مفتاحية تُستخدم داخل المُحدد (selector)، وتتيح لك تنسيق جزء معين من العنصر، مثل أول حرف، أو أول سطر، أو النص المحدد من قبل المستخدم.

يُكتب دائمًا باستخدام نقطتين (::)، لتمييزه عن الـ Pseudo-class الذي يُكتب بنقطة واحدة :.

أمثلة شائعة على Pseudo-elements

1. ::first-letter

يستهدف أول حرف من العنصر، وغالبًا ما يُستخدم لتنسيق الفقرات بأسلوب تقليدي:

2. ::first-line

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

3. ::selection

يُستخدم لتنسيق النص عندما يقوم المستخدم بتحديده (highlight) باستخدام الفأرة أو لوحة اللمس:

نصائح مهمة

• استخدم موقع caniuse.com للتحقق من دعم المتصفحات لأي Pseudo-element قبل استخدامه.
• لا تخلط بين Pseudo-elements وPseudo-classes::hover, :active, :nth-child() ← Pseudo-classes (تستهدف حالات).::before, ::after, ::first-letter ← Pseudo-elements (تستهدف أجزاء من العنصر).
• :hover, :active, :nth-child() ← Pseudo-classes (تستهدف حالات).
• ::before, ::after, ::first-letter ← Pseudo-elements (تستهدف أجزاء من العنصر).

خلاصة

• Pseudo-elements تمنحك تحكمًا دقيقًا في تنسيق أجزاء من العناصر دون تعديل HTML.
• تُكتب باستخدام :: وتُستخدم لتنسيق الحروف، الأسطر، أو المحتوى المُحدد.
• تُعد أداة قوية لتحسين تجربة المستخدم دون تعقيد الكود.