البرمجة

أفضل فئات زائفة في CSS

اخر تحديث 10/06/2025
19 تمت قراءة 3 دقيقة

5 فئات زائفة (Pseudo-classes) يجب عليك معرفتها في CSS: دليل شامل للمطورين

تُعد الفئات الزائفة (Pseudo-classes) من أهم أدوات CSS التي تمكّن المطورين من التحكم المتقدم في تنسيقات العناصر، دون الحاجة إلى تعديل هيكل HTML أو إضافة كود JavaScript معقد. تسمح هذه الفئات بتطبيق تنسيقات بناءً على حالة معينة للعنصر أو موقعه داخل الشجرة الهيكلية للوثيقة، مما يعزز من قوة التصميم ويمنح تجربة تفاعلية سلسة للمستخدمين.

الفئات الزائفة ليست سوى أوامر صغيرة ولكنها قوية جداً، يتم إضافتها إلى محددات (Selectors) CSS لتحديد العناصر بناءً على خصائص لا يمكن الوصول إليها بسهولة من خلال هيكلية HTML التقليدية فقط. يمكن استخدامها لتمييز الرابط الذي تمت زيارته، أو لتطبيق تنسيقات عند تحويم المؤشر على زر، أو حتى لاختيار العنصر الأول من نوع معين داخل مجموعة.

مواضيع ذات صلة

في هذا المقال المطول، نستعرض خمساً من أبرز الفئات الزائفة التي يجب أن يعرفها كل مطور ويب سواءً كان مبتدئاً أو محترفاً، مع أمثلة تطبيقية واستخدامات عملية في بيئات تطوير حقيقية.

الفئة الزائفة الأولى: :hover

من أكثر الفئات الزائفة استخدامًا وتأثيرًا، خاصة في عناصر التفاعل مثل الأزرار والروابط. تُستخدم :hover لتطبيق تنسيق معين عندما يحوم المستخدم فوق العنصر باستخدام مؤشر الفأرة. لا تتطلب هذه الفئة أي أكواد JavaScript وتوفر تجربة تفاعل بصرية قوية.

الاستخدام النموذجي:

css
button:hover {
  background-color: #0056b3;
  color: white;
  cursor: pointer;
}

الحالات العملية:

  • تغيير لون الأزرار عند التفاعل.

  • إبراز الروابط عند المرور عليها.

  • عرض نوافذ فرعية أو معلومات إضافية (tooltips) بشكل أنيق.

  • إضفاء تأثيرات على الصور مثل التعتيم أو التكبير.

تجدر الإشارة إلى أن تأثير :hover لا يعمل على أجهزة اللمس بالطريقة نفسها التي يعمل بها على الحواسيب المكتبية، لذا يجب على المطورين أخذ ذلك في الاعتبار أثناء التصميم التفاعلي المتجاوب.

الفئة الزائفة الثانية: :nth-child()

تُعد هذه الفئة الزائفة من الأدوات المتقدمة في CSS والتي تتيح اختيار عناصر محددة بناءً على ترتيبها ضمن عنصر الأب. وتفتح آفاقًا واسعة من التحكم الدقيق في تنسيقات العناصر المتكررة، مثل القوائم أو جداول البيانات.

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

css
li:nth-child(3) {
  color: red;
}

تقوم هذه الصيغة بتطبيق التنسيق فقط على العنصر الثالث من نوع

  • داخل عنصر أب يحتوي على عدة عناصر
  • .

    استخدامات متقدمة:

    • استخدام odd و even لتغيير لون الصفوف المتبادلة في الجداول.

    css
    tr:nth-child(odd) {
  background-color: #f9f9f9;
}
tr:nth-child(even) {
  background-color: #e9e9e9;
}

    • استخدام التعبير الرياضي لتحديد كل عدد معين من العناصر، مثل:

    css
    p:nth-child(3n) {
  font-weight: bold;
}

    هذه الأداة مفيدة جداً لتنسيق البيانات المنظمة دون إضافة صفوف أو أعمدة مخصصة.

    الفئة الزائفة الثالثة: :first-child

    تُستخدم هذه الفئة لاختيار أول عنصر ضمن مجموعة من العناصر داخل عنصر الأب. وعلى الرغم من أنها تبدو بسيطة، إلا أن استخدامها الصحيح يضفي احترافية على العرض البصري.

    الاستخدام النموذجي:

    css
    div p:first-child {
  font-size: 1.2em;
  color: darkblue;
}

    هذا الكود يعني أن يتم تطبيق التنسيق فقط على الفقرة الأولى داخل كل عنصر

    .

    الفروقات المهمة:

    • :first-child ليست مثل :first-of-type. فالأولى تختار العنصر الأول بغض النظر عن نوعه، بينما الثانية تختار العنصر الأول من نوع معين فقط.

    • يمكن استخدامها لتطبيق حدود أو مسافات مختلفة على العنصر الأول في القوائم أو بطاقات المحتوى.

    الفائدة العملية:

    • إزالة الهامش العلوي (margin-top) لأول عنصر فقط داخل الحاوية لتفادي المسافات غير المرغوبة.

    • تمييز العنوان الأول داخل المقالات.

    الفئة الزائفة الرابعة: :not()

    تُعتبر :not() من أكثر الفئات الزائفة مرونة وتعقيداً في الوقت نفسه. فهي تتيح استبعاد عناصر معينة من التنسيق دون التأثير على باقي العناصر.

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

    css
    p:not(.highlight) {
  color: #333;
}

    يتم تطبيق التنسيق على جميع عناصر

    التي لا تحتوي على الصنف highlight.

    الاستخدامات الذكية:

    • استبعاد عناصر من أنماط تنسيقية معينة.

    • تطبيق أنماط على قائمة باستثناء العنصر النشط.

    • استخدام تعابير مركبة مثل:

    css
    div:not(:last-child) {
  margin-bottom: 20px;
}

    الجدول التالي يلخص المقارنة بين الفئات المشابهة:

    الفئة الزائفة ما تفعله ملاحظات تقنية
    :not() تستبعد العناصر المطابقة للشروط المحددة لا تدعم مركبات مركبة في بعض المتصفحات القديمة
    :nth-child() تختار عناصر حسب الترتيب حساسة لموقع العنصر
    :first-child تختار أول عنصر فقط داخل العنصر الأب لا تختار حسب النوع

    الفئة الزائفة الخامسة: :checked

    ترتبط هذه الفئة ارتباطاً وثيقاً بعناصر الإدخال مثل الـ checkbox والـ radio. تُستخدم لتطبيق تنسيقات بناءً على ما إذا كان العنصر محددًا (checked) أو لا.

    مثال نموذجي:

    css
    input[type="checkbox"]:checked + label {
  font-weight: bold;
  color: green;
}

    الاستخدام العملي:

    • إبراز النص المرتبط بخانة اختيار تم تفعيلها.

    • إظهار/إخفاء عناصر واجهة المستخدم (عبر استخدام display: none و :checked).

    • تكوين أنماط تبادلية (toggle) دون استخدام JavaScript.

    مثال متقدم لتبديل العناصر باستخدام :checked:

    html
    <input type="checkbox" id="menu-toggle" hidden>
<label for="menu-toggle">☰ قائمةlabel>
<nav class="menu">...nav>

    css
    .menu {
  display: none;
}
#menu-toggle:checked ~ .menu {
  display: block;
}

    بهذه الطريقة يتم إنشاء قائمة منسدلة دون الحاجة إلى جافاسكريبت.

    أهمية الفئات الزائفة في تطوير واجهات المستخدم

    الفئات الزائفة تضيف طبقة متقدمة من التحكم في CSS، مما يجعل من الممكن تصميم تجارب مستخدم ديناميكية وجذابة دون تحميل إضافي أو تعقيد في البنية. بفضلها، يمكن تنفيذ العديد من الأفكار التفاعلية دون الحاجة إلى JavaScript، مما يُقلل من استهلاك الموارد ويُحسن من أداء الموقع وسرعته.

    إدخال هذه الفئات الزائفة ضمن أنماط التصميم يعزز من التوافقية بين المتصفحات ويدعم مفاهيم التصميم النظيف (Clean Code) وتقنيات الفصل بين الهيكل (HTML) والمظهر (CSS).

    المصادر والمراجع

    1. MDN Web Docs – CSS Pseudo-classes

    2. W3C – Selectors Level 4 Specification

    • اخر تحديث 10/06/2025
    19 تمت قراءة 3 دقيقة