الفرق بين Class و ID في HTML واستخدامهم في تنسيق العناصر باحتراف

في لغة HTML، بنستخدم خصائص معينة علشان نميز العناصر عن بعضها، ومن أشهر الخصائص دي هما id و class. في المقال ده، هنتعرف على الفرق بينهم، وإزاي نستخدمهم بشكل احترافي سواء مع CSS أو JavaScript.

يعني إيه ID في HTML؟

الـ ID هو اختصار لـ Identifier، وده بيستخدم لتحديد عنصر واحد فقط في الصفحة. لازم يكون فريد (Unique)، يعني مينفعش تكرر نفس الـ ID في عنصر تاني.

<p id="intro">دي أول فقرة في الصفحة</p>

تقدر تستخدمه مع CSS كده:

#intro {
  color: blue;
}

يعني إيه Class في HTML؟

الـ class بنستخدمه علشان نطبق نفس التنسيق أو التأثير على أكتر من عنصر. تقدر تكرر نفس الكلاس في كذا عنصر بدون أي مشاكل.

<p class="blue-text">نص بلون أزرق</p>
<h1 class="blue-text">عنوان أزرق</h1>

وCSS بتكون كده:

.blue-text {
  color: blue;
}

الفرق بين ID و Class

ID: فريد – يميز عنصر واحد فقط – بنستخدم الرمز #.
Class: ممكن يتكرر – يطبق على عدة عناصر – بنستخدم الرمز ..

دمج ID و Class مع بعض

ينفع عنصر واحد يكون ليه ID وكمان Class في نفس الوقت:

<p id="main-text" class="highlight">نص مهم بلون مميز</p>

مثال تطبيقي

<style>
  .box {
    padding: 10px;
    border: 1px solid gray;
  }

  #special {
    background-color: yellow;
  }
</style>

<div class="box">صندوق عادي</div>
<div class="box" id="special">صندوق مميز</div>

الاتنين واخدين نفس الكلاس فالتنسيق مشترك، لكن العنصر التاني واخد ID فخد لون مختلف.

نصائح مهمة

اسم ID أو Class مينفعش يبدأ برقم.
مينفعش يكون فيه مسافات، واستخدم - أو _ للفصل بين الكلمات.

كده نكون فهمنا الفرق بين id و class في HTML، وازاي نستخدمهم لتنسيق العناصر والتعامل معاها بشكل احترافي وسهل.