Pseudo class && pseudo element

هناك فرق بين pseudo-class وpseudo-element في CSS، وهذا الفرق بدأ يظهر بشكل أوضح ابتداءً من CSS3. دعني أشرح الفرق الجوهري بينهما:

Pseudo-Class (الصفة الزائفة)

تستخدم لاستهداف عناصر HTML استنادًا إلى حالتها أو تفاعل المستخدم معها.

تسمح لك بتطبيق تنسيقات مخصصة على العناصر النمطية مثل الارتباطات الغير مزارة (unvisited links) أو العناصر التي يتم تحديدها عند تمرير المؤشر (hover) عليها أو تنسيق العناصر عندما تكون في حالة تحديد (active).

تمثلها بوضع اسم الصفة الزائفة بعد علامة ":" في تعريف CSS.

a:link {
  color: blue; /* تغيير لون الروابط غير المزارة */
}

button:hover {
  background-color: yellow; /* تغيير لون الزر عند تمرير المؤشر عليه */
}

Pseudo-Element (العنصر الزائف)

تستخدم لإنشاء عناصر افتراضية إضافية داخل العناصر الفعلية في HTML وتنسيقها بشكل منفصل.

تمثلها باستخدام "::" بدلاً من ":" في تعريف CSS.

يتيح لك إضافة محتوى إضافي أو تنسيق إضافي داخل العناصر الفعلية. مثل إضافة علامات تعقيب إضافية (::before و ::after) لإضافة محتوى إضافي إلى عناصر HTML.

p::first-line {
  font-weight: bold; /* تغيير نمط النص في السطر الأول من فقرة */
}

div::before {
  content: "ملاحظة: "; /* إضافة نص إلى بداية العنصر div */
}

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

الأمر بسيط، انظر ل pseudo elements على أنها محددات عناصر تختلف عن العنصر المحدد، في حين أن pseudo classes هي محددات تختص بالعنصر الحالي.

أمثلة:

Pseudo elements:

• عنصر after يتموضع افتراضيا بعد العنصر
• عنصر before يتموضع افتراضيا قبل العنصر 
• عنصر first letter هو عنصر أول حرف من السلسلة النصية المحتواة في العنصر

Pseudo classes:

• العنصر عند تمرير مؤشر الفأرة hover 
• عنصر الرابط عندما يكون فعالا active 

فنكتب في الأولى:

• div:after
• div:before
• div:first-letter

ونكتب في الثانية:

• div:hover
• a:active 

الفرق الجوهري بين pseudo class و pseudo element هو أن pseudo class يستهدف حالة معينة لعنصر، بينما pseudo element يخلق عنصرًا جديدًا داخل عنصر موجود.

على سبيل المثال، يمكنك استخدام pseudo class :hover لتغيير لون عنصر عند وضع مؤشر الماوس عليه. يمكنك استخدام pseudo element ::after لإنشاء عنصر جديد بعد عنصر موجود، مثل إضافة نص أو صورة.

فيما يلي بعض الأمثلة على كيفية استخدام pseudo class و pseudo element:

Pseudo class:

a:hover { 
	color: red; 
}

هذا الكود سيغير لون جميع الروابط إلى الأحمر عند وضع مؤشر الماوس عليها.

Pseudo element:

p::after {
  content: "";
  color: red;
  position: absolute;
  top: 0;
  right: 0;
}

هذا الكود سيضيف نقطة حمراء بعد كل فقرة.

الفوائد:

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