شرح Class و ID في CSS — كيف تستهدف عناصر محددة بدقة واحتراف؟

في الدرس السابق تعلمت محدد العنصر (Element Selector) الذي يستهدف كل العناصر من نفس النوع. لكن في الواقع، غالباً ستحتاج أن تنسّق عنصراً معيناً أو مجموعة محددة فقط، وليس كل الفقرات أو كل العناوين في الصفحة.

هنا يظهر دور Class وID — وهما من أهم المحددات في CSS. فهم الفرق بينهما من البداية سيوفر عليك أخطاء كثيرة لاحقاً.

إذا كنت تبحث عن الفرق بين Class و ID في CSS أو متى أستخدم class ومتى أستخدم id في CSS أو CSS Selectors للمبتدئين، فهذا الدرس مصمم لك.

ما هو Class وما هو ID في CSS؟

كلاهما صفات نضيفها داخل HTML، ثم نستهدفها في CSS:

• Class: لتجميع أكثر من عنصر تحت نفس التنسيق.
• ID: لتعريف عنصر واحد فريد داخل الصفحة.

التعريف البسيط: استخدم class عندما تريد إعادة استخدام التنسيق، واستخدم id عندما يكون العنصر فريداً ولا يتكرر.

كيف نكتب Class و ID في HTML و CSS بشكل صحيح؟

١. كتابة Class

في HTML:

<p class="highlight">نص مميز</p>

ماذا يفعل هذا الكود؟ يضيف class اسمها highlight إلى فقرة واحدة.

النتيجة المتوقعة: لن يظهر تغيير بصري حتى تضيف قاعدة CSS لهذه الـ class.

خطأ شائع: كتابة اسم class مختلف في CSS عن HTML.

في CSS نكتب اسم الـ class مسبوقاً بنقطة .:

.highlight {
    background-color: #fef08a;
    font-weight: bold;
}

ماذا يفعل هذا الكود؟ ينسق كل عنصر يحمل class highlight.

سطر بسطر:

• .highlight: يستهدف العناصر حسب الـ class.
• background-color: يضيف خلفية صفراء فاتحة.
• font-weight: bold;: يجعل الخط عريضاً.

النتيجة المتوقعة: يمكن إعادة استخدام نفس التنسيق على عناصر متعددة.

خطأ شائع: نسيان النقطة قبل اسم الـ class.

٢. كتابة ID

في HTML:

<h1 id="main-title">مرحباً بك</h1>

ماذا يفعل هذا الكود؟ يحدد هوية فريدة للعنوان باسم main-title.

النتيجة المتوقعة: هذا المعرف يفترض أن يظهر مرة واحدة فقط في الصفحة.

خطأ شائع: تكرار نفس id في أكثر من عنصر.

في CSS نكتب اسم الـ id مسبوقاً بهاشتاج #:

#main-title {
    color: #1d4ed8;
    text-decoration: underline;
}

ماذا يفعل هذا الكود؟ يطبق التنسيق على العنصر الذي يحمل id=\"main-title\" فقط.

سطر بسطر:

• #main-title: استهداف عنصر فريد.
• color: يغير لون النص.
• text-decoration: يضيف خطاً أسفل العنوان.

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

خطأ شائع: استخدام .main-title بدل #main-title.

مثال عملي كامل

HTML:

<h1 id="main-title">موقعي التعليمي</h1>

<p class="highlight">هذه فقرة مهمة.</p>
<p>هذه فقرة عادية.</p>
<button class="highlight">زر مميز</button>

CSS:

#main-title {
    color: #1e3a8a;
    margin-bottom: 16px;
}

.highlight {
    background-color: #fde68a;
    padding: 6px 10px;
    border-radius: 6px;
}

ماذا يفعل هذا الكود؟ يجمع بين تنسيق عنصر فريد عبر ID وتنسيق متكرر عبر Class.

سطر بسطر:

• قاعدة #main-title: للعنوان الرئيسي فقط.
• قاعدة .highlight: لكل عنصر يحمل هذه الفئة.

النتيجة المتوقعة: مرونة أعلى: تخصيص عنصر واحد مع إعادة استخدام نمط مشترك.

خطأ شائع: الاعتماد على ID لكل العناصر بدل استخدام Class.

النتيجة: العنوان الوحيد الذي يملك id="main-title" يأخذ تنسيقه الخاص، بينما كل عنصر يحمل class="highlight" يأخذ نفس التنسيق المشترك.

الفرق بين Class و ID في CSS بشكل واضح

وجه المقارنة	Class	ID
الرمز في CSS	.classname	#idname
عدد مرات الاستخدام	يمكن تكراره على عدة عناصر	يجب أن يكون فريداً داخل الصفحة
أفضل استخدام	التنسيقات المتكررة والقابلة لإعادة الاستخدام	عنصر وحيد مثل عنوان رئيسي أو قسم مميز
المرونة	أعلى	أقل

متى نستخدم Class ومتى نستخدم ID في CSS؟

استخدم Class عندما:

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

استخدم ID عندما:

• العنصر فريد فعلاً داخل الصفحة.
• تريد إنشاء رابط داخلي (Anchor) مثل #contact.
• تحتاج استهداف عنصر واحد في JavaScript.

أخطاء شائعة في استخدام Class و ID في CSS

١) تكرار نفس ID في أكثر من عنصر:

<!-- خطأ -->
<h2 id="title">عنوان 1</h2>
<h2 id="title">عنوان 2</h2>

ماذا يفعل هذا الكود؟ يكرر نفس الـ ID مرتين، وهذا غير صحيح معيارياً.

النتيجة المتوقعة: قد يحدث تعارض في CSS وJavaScript وسلوك غير متوقع.

خطأ شائع: اعتبار ID مثل Class من حيث التكرار.

هذا يخالف القاعدة لأن الـ ID يجب أن يكون فريداً.

٢) الخلط بين النقطة والهاشتاج:

#btn-primary { ... }  /* يستهدف ID */
.btn-primary { ... }  /* يستهدف Class */

ماذا يفعل هذا الكود؟ يوضح فرق الاستهداف بين # و..

النتيجة المتوقعة: كل سطر يستهدف نوعاً مختلفاً من المعرفات.

خطأ شائع: نسخ القاعدة برمز خاطئ فيتعطل التنسيق.

تغيير رمز واحد فقط يغيّر العنصر المستهدف بالكامل.

٣) اختيار أسماء غير واضحة:

تجنب أسماء مثل red-text إذا كان الغرض الحقيقي "رسالة خطأ". الأفضل أسماء دلالية مثل error-message لأنها أسهل للصيانة.

الأسئلة الشائعة — FAQ

هل يمكن وضع أكثر من Class في نفس العنصر في CSS؟

نعم، وذلك شائع جداً:

<button class="btn btn-primary large">إرسال</button>

ماذا يفعل هذا الكود؟ يضيف 3 Classes للعنصر نفسه لتجميع أكثر من نمط.

النتيجة المتوقعة: الزر يأخذ تنسيقات مشتركة ومخصصة بالحجم في نفس الوقت.

خطأ شائع: فصل أسماء الـ classes بفاصلة بدل مسافة.

هل يمكن وضع أكثر من ID في نفس العنصر في HTML/CSS؟

لا، كل عنصر يقبل id واحداً فقط.

هل Class أضعف من ID في CSS من حيث الأولوية؟

نعم، من ناحية أولوية التطبيق (Specificity) فإن ID أقوى من Class. لكن هذا لا يعني أنه الأفضل دائماً؛ الأهم هو اختيار ما يخدم تنظيم الكود.

هل يمكن الجمع بين Element وClass أو ID في CSS؟

نعم، مثل:

p.highlight {
    color: #b45309;
}

ماذا يفعل هذا الكود؟ يستهدف فقط عناصر p التي لديها class اسمها highlight.

سطر بسطر:

• p.highlight: دمج عنصر + class لزيادة الدقة.
• color: تطبيق اللون على هذا النطاق فقط.

النتيجة المتوقعة: عناصر مثل div.highlight لن تتأثر.

خطأ شائع: توقع أن أي .highlight سيتأثر حتى لو لم يكن p.

هذا يستهدف فقط فقرات p التي تحمل class اسمه highlight.