class و id في HTML: تسمية العناصر

في صفحتك عشر فقرات، وتريد أن تلوّن ثلاثاً منها فقط. كيف تخبر CSS أي الفقرات تقصد؟ الحل أن تعطي العناصر أسماء. في HTML خاصيتان لهذا الغرض: class و id. ستستخدمهما في كل صفحة تكتبها، لأنهما الجسر بين HTML من جهة، و CSS و JavaScript من جهة أخرى.

الخاصية class

class تضع العنصر في مجموعة لها اسم. ويمكن أن يحمل الاسم نفسه أي عدد من العناصر:

<p class="note">تذكّر حفظ الملف قبل الإغلاق.</p>
<p>هذه فقرة عادية.</p>
<p class="note">راجع الدرس السابق أولاً.</p>

ثم تكتب التنسيق مرة واحدة لكل من يحمل هذا الاسم. في CSS نشير إلى الكلاس بـ نقطة قبل اسمه:

<style>
  .note { background: #fef3c7; padding: 8px; }
</style>

الفقرتان الأولى والثالثة ستأخذان الخلفية الصفراء، والثانية تبقى كما هي.

تخيّل الزي المدرسي: كل طلاب الصف الأول يلبسون اللون نفسه، فتعرف صفهم من النظرة الأولى. الكلاس هو هذا الزي: علامة مشتركة بين عناصر كثيرة.

أكثر من كلاس للعنصر

العنصر الواحد يمكن أن ينتمي إلى عدة مجموعات. اكتب الأسماء في الخاصية نفسها وافصل بينها بمسافة:

<button class="btn">إلغاء</button>
<button class="btn primary">حفظ</button>
<button class="btn primary large">اشترك الآن</button>

كل الأزرار تأخذ تنسيق btn الأساسي، وبعضها يضيف فوقه primary أو large. بهذه الطريقة تبني تنسيقات صغيرة وتركّب منها ما تشاء.

الخاصية id

id تعطي العنصر اسماً فريداً: لا يتكرر في الصفحة كلها.

<h1 id="page-title">دليل المبتدئين</h1>
<section id="contact">...</section>

في CSS نشير إلى الـ id بعلامة # قبل اسمه:

<style>
  #page-title { color: darkblue; }
</style>

إذا كان الكلاس زياً مدرسياً، فالـ id هو الرقم القومي: لكل شخص رقم واحد لا يشاركه فيه أحد.

أين تحتاج id؟

استخدمت الـ id في دروس سابقة دون أن ننبهك إلى اسمه:

1. القفز داخل الصفحة: الرابط <a href="#contact"> ينقلك إلى العنصر الذي يحمل id="contact".
2. ربط label بالحقل: <label for="email"> يرتبط بالحقل الذي يحمل id="email".
3. الوصول من JavaScript: لاختيار عنصر بعينه وتغييره.

<a href="#faq">اذهب إلى الأسئلة الشائعة</a>

<h2 id="faq">الأسئلة الشائعة</h2>

class أم id؟

	class	id
التكرار في الصفحة	مسموح	ممنوع، الاسم فريد
عدد الأسماء للعنصر	عدة أسماء	اسم واحد
الرمز في CSS	نقطة .name	علامة #name
الاستخدام الأساسي	التنسيق	الروابط الداخلية و label و JavaScript

والقاعدة العملية التي يتبعها أغلب المطورين: للتنسيق استخدم class دائماً، واترك id للحالات الثلاث السابقة.

قواعد اختيار الأسماء

• بلا مسافات. المسافة في class تفصل بين كلاسين، وفي id خطأ.
• بحروف إنجليزية، ولا يبدأ الاسم برقم.
• إذا كان الاسم من كلمتين فافصل بينهما بشرطة: main-menu و product-card.
• الأسماء حساسة لحالة الحروف: Note و note اسمان مختلفان.
• سمِّ العنصر بحسب وظيفته لا شكله: warning أفضل من red-text، لأنك قد تغيّر اللون غداً ويبقى الاسم صحيحاً.

خصائص عامة أخرى

class و id من الخصائص العامة (Global Attributes)، أي أنها تعمل مع كل الوسوم. ومنها أيضاً lang و dir و title التي عرفتها، وهاتان الخاصيتان:

hidden تخفي العنصر من الصفحة تماماً، وتُكتب بلا قيمة:

<p hidden>هذه الفقرة موجودة في الكود ولا تظهر في الصفحة.</p>

data-* تخزّن معلومة خاصة بك داخل العنصر. تختار أنت الاسم الذي يأتي بعد data-:

<li data-price="150" data-category="books">قاموس الجيب</li>

هذه المعلومات لا تظهر للزائر، لكن JavaScript تستطيع قراءتها لاحقاً، مثلاً لحساب إجمالي الأسعار.

جرّب بنفسك

غيّر الكلاسات في الكود وشاهد النتيجة: أضف الكلاس done إلى المهمة الثالثة، ثم أعطِ المهمة الأولى الكلاسين task urgent معاً. وجرّب الرابط في الأعلى:

جرّب بنفسكHTML

محرر الكود (HTML)<style> .task { padding: 8px; border: 1px solid #ccc; margin: 6px 0; } .done { text-decoration: line-through; color: gray; } .urgent { background: #fee2e2; } #summary { font-weight: bold; } </style> <p><a href="#summary">اذهب إلى الملخص</a></p> <h2>مهام اليوم</h2> <p class="task">مراجعة درس class و id</p> <p class="task done">حل تمرين الجداول</p> <p class="task">كتابة الصفحة الشخصية</p> <p class="task urgent">تسليم المشروع قبل المساء</p> <p id="summary">الملخص: أربع مهام، واحدة منتهية.</p>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• تكرار الـ id: إذا حمل عنصران الاسم نفسه، فالرابط الداخلي يذهب إلى الأول فقط، و JavaScript تتجاهل الثاني. إذا احتجت الاسم أكثر من مرة فهذا كلاس.
• كتابة النقطة أو # في HTML: الرمزان يُكتبان في CSS فقط. في HTML تكتب class="note" وليس class=".note".
• الفصل بين الكلاسات بفاصلة: class="btn, primary" خطأ. الفاصل هو المسافة.

اختبر نفسك

سؤال

كم عنصراً في الصفحة يمكن أن يحمل id='menu'؟

أي عددعنصران على الأكثرعنصر واحد فقط

سؤال

ما معنى class='card featured'؟

العنصر يحمل كلاسين: card و featuredكلاس واحد اسمه card featuredخطأ، لأن المسافة ممنوعة

الخلاصة

• class اسم مجموعة يتكرر على أي عدد من العناصر، ورمزه في CSS النقطة.
• العنصر يحمل عدة كلاسات تفصل بينها مسافات.
• id اسم فريد لعنصر واحد، ورمزه في CSS علامة #.
• استخدم class للتنسيق، و id للروابط الداخلية و label و JavaScript.
• hidden تخفي العنصر، و data-* تخزّن معلوماتك الخاصة فيه.