id و class چه فرقی دارن؟

در یک صفحه ی وب برای اینکه بتونیم یک تگ رو صدا کنیم (مثلا وقتی بخوایم بهش استایل بدیم)، میتونیم از این دو تا ویژگی استفاده کنیم. یه ویژگی class و اون یکی id نام داره. حالا id و class چه فرقی دارن؟

شناسه یا id چیه؟

ویژگی id برای شناسایی یه عنصر منحصر به فرد استفاده میشه، یعنی هر id تو یه صفحه ی وب فقط میتونه منحصر به یه عنصر باشه، تو دنیای ما حکم کدملی افراد رو داره که هر ایرانی یه کد ملی مخصوص به خودش داره و یه کدملی به دو نفر اختصاص نداره.

خلاصه بگم تو یک صفحه html نباید دو تا تگ وجود داشته باشه که id های یکسان داشته باشن!

کلاس یا class چیه؟

ویژگی class برای اینه که یه سری عنصر رو گروه بندی کنیم و بهشون یه سری استایل خاص بدیم، یعنی مثلا به 5 عنصر یه کلاس بدیم که باعث شه مثلا رنگ فونتشون قرمز بشه. البته اینم بگم که یه عنصر میتونه یک یا چند کلاس داشته باشه. تو دنیای واقعی ما دقیقا مثل کلاس رفتن بچه ها میمونه، هر کودکی میتونه یه کلاس ثبت نام کنه و بره، مثلا کلاس شنا، تو یه کلاس شنا ممکنه چند عنصر یا کودک وجود داشته باشه، کلاس شنایی هم داریم که توش فقط یه عنصر یا کودک باشه و البته یه کودک میتونه علاوه بر کلاس شنا کلاسهای دیگه ای هم ثبت نام کنه.

نحوه استفاده از class و id در صفحه ی HTML

همونطور که تو تصویر میبینید من به دو تا dive ویژگی id و class رو اختصاص دادم:

اگه بخوام در مورد عکس توضیح بدم، توی موارد زیر میشه نکات قابل توجه رو جمع بندی کرد:

1. دو تا تگ div داریم که هر دوتا کلاس های blue_box و size-100px رو گرفتن
2. پس به یک تگ میشه بیش از یک کلاس داد! الان div اول 2 تا کلاس داره و div دوم 3 تا کلاس داره
3. پس به دو تا تگ هم میشه کلاس های یکسان داد! هر دوشون کلاس های blue_box و size-100px رو دارن
4. استایل هایی که توی id میدیم به استایل های class مون ارجحیت داره! الان اینجا کلاس size-100px میگه width:100px ولی آیدی the_blue_box میگه width:200px که ما شاهدیم 200 اعمال شده!
5. id منحصر به فرده، مثل کد ملی میمونه پس به دو تا تگ هیچوقت id یکسان نمیدیم.
6. ما میتونیم به یک تگ، هم id بدیم و هم class بدیم؛ به صورت همزمان، هیچ مشکلی هم پیش نمیاد
7. توی css برای صدا کردم class از نقطه یا dot استفاده میکنیم و برای صدا کردن id از # یا همون شارپ استفاده میکنیم.

در ضمن اگه به برنامه نویسی علاقه داری و مشتاق یادگیری هستی دوره صفر تا صد طراحی سایت با برنامه نویسی، در قالب پیاده سازی پروژه دیجی کالا رو از دست نده.