برای آنکه محتوا را در اسناد HTML تعریف کنیم لازم است که از روش هایی استفاده کرد. المان های اولیه مانند <h1>، <p> و <ul> تا حدودی این کار را انجام می‌دهند. اما این تگ‌ها تمام حالات قابل انتخاب برای طرح صفحات را شامل نمی‌شوند. به همین دلیل از آی‌دی (ID) و کلاس (Class) استفاده می‌کنیم.
برای مثال <ul id="nav"> را در نظر بگیرید. از طریق آی‌دی nav میتوانیم این فهرست را برای تغییرات هدف قرار دهیم، حتی اگر فهرست ul دیگری هم در آن صفحه وجود داشته باشد. یا شاید بخشی از صفحه وجود داشته باشد که برای آن قسمت تگ مرتبطی وجود نداشته باشد، در این حالت از کلاس استفاده می‌شود. برای مثال <div class="sidebar-box"> را برای جعبه‌های نگهدارنده محتوا در ستون کناری در نظر بگیرید.
از این رو می‌توان گفت ID ها و Class ها «قلاب»هایی هستند که برای ایجاد ساختار صفحات به آن‌ها نیاز داریم. اما تفاوت id و class چیست؟
# آی‌دی ها «ID’s» یکتا هستند
- هر المان تنها یک ID می‌تواند داشته باشد
- هر ID فقط می‌تواند به یک المان در صفحه اشاره کند
اولین چیزی که در مورد تفاوت id و class مطرح می‌شود این است که از ID ها فقط یکبار استفاده کنید، اما می‌توانید از Class ها بارها و بارها استفاده کنید، این توضیح شاید حتی برای افرادی که با HTML و CSS آشنایی هم دارند مبهم باشد. چون به نظر نمی‌رسد که عملکرد متفاوتی داشته باشند.
اما فعلا این نکته را در نظر داشته باشید که کدها باید اعتبارسنجی شوند. اگر از یک ID برای بیش از یک المان استفاده شود، اعتبارسنجی به درستی صورت نخواهد گرفت. این گزینه به تنهایی مشخص می‌کند که چرا باید بین ID ها و Class ها فرق بگذاریم. در ادامه نیز توضیحات بیشتری خواهیم داد.
# کلاس ها «Classes» یکتا نیستند
- از یک کلاس می توانید برای چندین المان استفاده کنید.
- از چندین کلاس می‌توانید برای یک المان استفاده کنید.
هر تغییر ظاهری که بخواهید روی چندین المان در یک صفحه اعمال شود باید از کلاس استفاده شود. برای مثال چند ابزارک را در نظر بگیرید:
<div class="widget"></div> <div class="widget"></div> <div class="widget"></div>
اکنون می‌توانید از نام کلاس «widget» به عنوان قلاب استفاده کنید. اما اگر بخواهید فقط یکی از آن‌ها بزرگ‌تر از بقیه باشد، و سایر ویژگی را حفظ کند چه باید کرد؟ در این صورت می‌توان به المان مورد نظر کلاس جدیدی را اضافه کرد:
<div class="widget"></div> <div class="widget big"></div> <div class="widget"></div>
همانطور که در خط دوم مشاهده می‌کنید تنها نام کلاس big را اضافه کردیم. برای استفاده از کلاس‌ها تنها کافیست بین آن‌ها یک فاصله بگذارید.
# عدم وجود مقدار پیش‌فرض برای آی‌دی و کلاس در مرورگر
اضافه کردن نام کلاس یا آی‌دی به یک المان به خودی خود هیچ تغییری در آن المان ایجاد نمی‌کند.
گاهی اوقات دیده می‌شود که افراد مبتدی در این زمینه دچار اشتباه می‌شوند. برای مثال، مشکل ظاهری یک وب‌سایت را با اضافه کردن نام یک کلاس رفع می‌کنید. سپس در سایت دیگری که با آن مشکل مواجه می‌شوید را هم سعی می‌کنید با استفاده از همان نام کلاس رفع کنید. فکر می‌کنید که نام Class یا ID مقداری مشخص دارد که هرجا می‌توان از آن استفاده کرد.
اما مجددا باید بگوییم که ID ها و Class ها هیچگونه مقدار پیش‌فرضی از خودشان ندارند. لازم است که توسط دستورات CSS و یا JS مورد خطاب قرار گیرند.
# عملکرد خاص ID ها در مرورگر
برخلاف Class ها که هیچ قابلیت خاصی در مرورگر ندارد، ID ها از یک عملکرد مهم برخوردار هستند. این ویژگی از طریق عبارت # در آدرس URL مشخص می‌شود.
برای مثال، آدرس rasalearn.ir/?p=865#respond را در نظر بگیرید. اگر روی این لینک کلیک کنید، مرورگر سعی خواهد کرد تا المان حاوی ID به مقدار respond را نشان دهد. این مقدار در هر قسمت از سایت که قرار گرفته باشد، مرورگر به آن قسمت اسکرول خواهد کرد (لینک نمونه رو تست کنید و جوابش رو با ما هم در میان بگذارید).
این هم یک دلیل دیگر که چرا مهم است ID ها فقط یکبار استفاده شوند. اگر آی‌دی respond در بیش از یک المان استفاده می‌شد مرورگر باید کدام یکی را نشان می‌داد؟!
لینک که برای مثال گذاشته بودید رو کلیک کردم و دفعه اول متوجه نشدم که جریان چی هست، اما بار دوم موضوع رو گرفتم و برام جالب بود. لطفا از این دست مقالات بیشتر بگذارید