CSS - Pseudo-classes الطبقات الكاذبة

CSS - الطبقات الكاذبة (Pseudo-classes)

🔸 الطبقات الكاذبة (Pseudo-classes) تُستخدم لتطبيق تأثيرات أو أنماط على العناصر في حالات معينة، مثل عند مرور الفأرة أو عند زيارة رابط.

🔹 الصيغة العامة

selector:pseudo-class {
  style-properties;
}

🧪 مثال: :hover

تُستخدم لتطبيق تأثير عند مرور الفأرة على العنصر.

a:hover {
  color: red;
  font-weight: bold;
}

🧪 مثال: :visited و :link

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

📌 :link يحدد الروابط التي لم تُزر بعد، و:visited لتلك التي تم زيارتها.

🧪 مثال: :first-child

p:first-child {
  color: green;
}

📌 يحدد الفقرة <p> إذا كانت أول عنصر ابن داخل الحاوية.

🧪 مثال: :nth-child(n)

li:nth-child(2) {
  background-color: yellow;
}

📌 يقوم بتطبيق النمط على العنصر الثاني من نوعه داخل الأب.

🔸 أمثلة شائعة أخرى

• :active – عند الضغط على الرابط أو الزر.
• :focus – عندما يكون العنصر في وضع الإدخال (مثل input نشط).
• :not(selector) – لتحديد العناصر التي لا تطابق محدد معين.

📌 ملاحظات مهمة

• ترتيب كتابة الطبقات الكاذبة في الروابط مهم: :link → :visited → :hover → :active
• بعض الطبقات مثل :hover لا تعمل على الأجهزة التي لا تحتوي فأرة (مثل الجوالات).
• يمكن دمج أكثر من طبقة كاذبة مع selector واحد.