انتقل إلى محتوى الدرس

Pseudo Elements Versus Pseudo Classes الفرق بين العناصر الزائفة والفئات

تعلم استخدام العناصر الزائفة في لغة CSS لتنسيق أجزاء محددة من النصوص وتوليد الشارات الزخرفية وعلامات الاقتباس ثنائية اللغة وتلوين رموز القوائم وتظليل القراءة دون إضافة وسوم فائضة.
3 صفوف تعليمية
لغة CSS
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

بينما تستخدم الفئة الزائفة نقطتين مفردتين مثل :hover أو :focus لاستهداف عنصر موجود بالكامل عندما يمر بحالة تفاعلية معينة، يستخدم العنصر الزائف نقطتين مزدوجتين مثل ::before أو ::first-line لاستهداف جزء فرعي محدد داخل العنصر أو توليد صندوق زخرفي افتراضي بداخله.

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

الصف 2 صورة توضيحية
مخطط يوضح موضعي الصندوقين الفرعيين ::before و ::after حول المحتوى النصي الأصلي داخل العنصر
الصف 3 ملاحظة هامة