✨ Pseudo-classes في CSS: اجعل موقعك يتفاعل مع المستخدم! 🎯

اليوم سنتعلم مفهوماً رائعاً في CSS يضيف الحيوية والتجاوب لتصميماتك: Pseudo-classes أو الفئات الزائفة. إذا كنت تريد أن يتغير لون الزر عندما يمر عليه المؤشر، أو أن يتغير نمط حقل النص عندما ينقر عليه المستخدم، فهذا الدرس لك! 🚀

ما هي Pseudo-classes؟ 🤔

Pseudo-classes هي كلمات مفتاحية خاصة نضيفها إلى محددات CSS (Selectors). وظيفتها هي تحديد العنصر بناءً على حالته الخاصة، وليس بناءً على اسمه أو فئته أو معرفه.

تخيل أن لديك زراً. هذا الزر له حالات مختلفة:

  • الحالة العادية: كما يظهر في الصفحة.
  • حالة التمرير (:hover): عندما يمرر المستخدم مؤشر الفأرة فوقه.
  • حالة النقر (:active): أثناء نقر المستخدم عليه.

الفئات الزائفة تسمح لك بتطبيق أنماط CSS مختلفة لكل حالة من هذه الحالات! وهذا هو أساس التفاعل الذي تراه في المواقع الحديثة.

بناء الكتابة:

selector:pseudo-class {
  property: value;
}

لاحظ النقطتين : قبل اسم الفئة الزائفة.

أشهر وأهم Pseudo-classes التي يجب أن تعرفها 🏆

لنبدأ بأكثر الفئات الزائفة استخداماً ورواجاً.

1. :hover (التمرير)

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

مثال عملي: نريد تغيير لون خلفية زر عندما يمر عليه المؤشر.

<button class="my-button">انقر هنا!</button>

/* النمط الأساسي للزر */
.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
}

/* النمط عند التمرير فوق الزر */
.my-button:hover {
  background-color: darkblue; /* لون أغمق */
  cursor: pointer; /* تغيير شكل المؤشر إلى يد */
}

في هذا المثال، عندما تمرر فأرتك فوق الزر، سيتغير لون خلفيته إلى darkblue.

2. :active (النشط)

تطبق الأنماط في اللحظة التي ينقر فيها المستخدم على العنصر ويستمر الضغط عليه.

مثال عملي: جعل الزر يبدو وكأنه مضغوط عند النقر عليه.

/* النمط أثناء النقر على الزر */
.my-button:active {
  background-color: navy; /* لون أكثر قتامة */
  transform: translateY(2px); /* إزاحة بسيطة للأسفل لمحاكاة الضغط */
}

3. :focus (التركيز)

تطبق الأنماط عندما يتم "تركيز" العنصر، مثل النقر على حقل إدخال نصي (<input>) أو تحديد رابط باستخدام مفتاح Tab على لوحة المفاتيح. هذا مهم جداً لتحسين إمكانية الوصول (Accessibility).

مثال عملي: إضافة حدود ملونة حول حقل الإدخال عندما يكون نشطاً.

<input type="text" placeholder="اكتب اسمك هنا">

input {
  padding: 8px;
  border: 2px solid #ccc;
}

input:focus {
  border-color: green; /* تغيير لون الحدود إلى أخضر */
  outline: none; /* إزالة الحد الافتراضي في بعض المتصفحات */
}

4. :visited (تمت الزيارة)

تطبق الأنماط على الروابط (<a>) التي سبق للمستخدم زيارتها. عادةً ما تستخدم لتغيير لون الرابط.

a:visited {
  color: purple; /* اللون المعتاد للروابط التي تمت زيارتها */
}

فئات زائفة للتحديد ضمن مجموعة 🧩

هذه الفئات تتيح لك تحديد عناصر بناءً على موقعها بين العناصر الشقيقة (الأخوة) داخل العنصر الأب.

:first-child و :last-child

  • :first-child: تطبق النمط على العنصر فقط إذا كان الابن الأول لأبيه.
  • :last-child: تطبق النمط على العنصر فقط إذا كان الابن الأخير لأبيه.

مثال عملي: تلوين أول وآخر عنصر في قائمة.

<ul>
  <li>عنصر القائمة الأول</li>
  <li>عنصر القائمة الثاني</li>
  <li>عنصر القائمة الثالث</li>
</ul>

li:first-child {
  color: red;
  font-weight: bold;
}

li:last-child {
  color: blue;
  font-weight: bold;
}

:nth-child() (الابن ذو الترتيب n)

هذه أقوى وأكثرها فائدة. تسمح لك بتحديد عنصر بناءً على ترتيبه باستخدام صيغة.

أمثلة على الصيغة:

  • :nth-child(3): يختار الابن الثالث فقط.
  • :nth-child(odd): يختار جميع العناصر ذات الترتيب الفردي (1, 3, 5, ...).
  • :nth-child(even): يختار جميع العناصر ذات الترتيب الزوجي (2, 4, 6, ...).
  • :nth-child(2n): نفس even (2, 4, 6).
  • :nth-child(2n+1): نفس odd (1, 3, 5).

مثال عملي: تلوين خلفية الصفوف الزوجية في جدول بقائمة لتسهيل القراءة (تأثير "Zebra Stripe").

/* لنفترض أن لدينا مجموعة من <div> تمثل عناصر في قائمة */
.list-item:nth-child(even) {
  background-color: #f2f2f2;
}

خلاصة سريعة 💎

  • Pseudo-classes تُعرِّف حالة خاصة للعنصر (:hover, :focus, إلخ).
  • تركيبها: selector:pseudo-class { }.
  • :hover للتجاوز بالمؤشر، :active للنقر، :focus للتركيز.
  • :first-child, :last-child, و :nth-child() لتحديد العناصر بناءً على ترتيبها.

جرب هذه الأمثلة بنفسك! أنشئ ملف HTML بسيط وابدأ في تجربة هذه الفئات الزائفة لترى كيف يمكنها تحويل تصميمك من ثابت إلى تفاعلي.