تفاوت ID با Class

[Saeed_Shamsi 758]

با سلام

مطماً برای خیلی از دوستان طراح این سوال پیش میاد که ماکه میتونیم هر کدی رو که خواستیم به اینها بدیم پس اینها چه تفاوتهای با هم دارند ؟ آیا کداهای هستند که دریکی از اینها کا میکنه و در اونیکی نه ! که ما از آن بی خبریم و ....

همون‌طوری که می‌دونیم برای تعیین CSS ِ المنت‌ها و مشخص کردن این‌که کدوم المنت، از کدوم CSS استفاده کنه، از id و class استفاده می‌شه.

• شباهت id و class
  هم میشه از این استفاده کرد، هم میشه از اون یکی استفاده کرد. یعنی این جوری نیست که id یه کاری بکنه که class نتونه بکنه (یا برعکس)
  
• تفاوت id و class
  class برای این درنظر گرفته شده که به یک سری از المنت‌های ، یک مجموعه CSS خاص (یک بلاک CSS خاص) رو نسبت بدیم. (مثلا برای همه‌ی منوهای سایت از کلاس navigation استفاده می‌کنیم، یا برای همه‌ی پست‌هایی که توی یه وبلاگ زده میشه از کلاس post استفاده می‌کنیم).
  اما id برای این درنظر گرفته شده که به یک المنت خاص، یک بلاک CSS رو اختصاص بدیم. (مثلا عکس header سایت که فقط یه عکس خاص هست idش رو بذاریم header-image، یا برای div ای که فوتر سایت رو دربر می‌گیره از آی‌دی ِ footer استفاده کنیم).

سوال: آیا میشه فقط از یه کدوم از اینا استفاده کنم؟

بله. میشه. تو می‌تونی هم برای (سری المنت‌ها) و هم برای (المنت‌های خاص) فقط از id (یا فقط از class) استفاده کنی اما همون‌طوری که گفتم اینا هر کدوم برای یه منظوری هستن.

* یک مبحثی در CSS وجود داره به نام specificity که این مورد باعث یکی از بزرگترین اختلاف ها بین class و id میشه.

گاها دیده میشه که یک عنصر در صفحه تحت تاثیر دو سبک محتلف در CSS قرار میگیره. مثلا شما یک تگ div دارید که رنگ متن در داخل اون رو سبز مشخص کردید و داخل این تگ هم یک تگ پاراگراف دارید و رنگ اون رو هم قرمز انتخاب کردید. حالا سی اس اس باید رنگ سبز رو برای متن انتخاب کنه یا رنگ قرمز رو ؟

specificity مشخص میکنه که در این شرایط اهمیت کدام سبک بیشتر و اون رو به صفحه شما اعمال میکنه. برای مشخص کردن specificity هر سبک از یک مقدار چهار قسمتی استفاده میشه به این شکل

0,0,0,0

مقدار ها هر چه به سمت چپ میره ارزشش بیشتر میشه

مثلا این رو در نظر بگیرید

0.0.0.100

و حالا این یکی رو

0.0.1.0

بین این دو ارزش مقدار دومی از اولی ارزشش بیشتره چون رقم دوم این بخش چهار قسمتی دارای مقدار هست و به همین خاطر ارزش مقدار دوم از اول بیشتره.

خوب شما وقتی از class استفاده میکنی specificity خصوصیت class این مقدار هستش

0.0.1.0

و مقدار specificity برای خصوصیت id اینه

0.1.0.0

همونطور که مشخص کردم ارزش id در specificity از class بیشتره و اگر شما در صفحه در 100 سبک مختلف که به class ها اختصاص داده باشید رنگ یک پاراگراف رو سبز تعیین کرده باشید و تنها در یک بخش به یک پاراگراف یک id اختصاص داده باشید و رنگ رو قرمز مشخص کرده باشید در اینجا رنگ قرمز برای اون پاراگراف در نظر گرفته میشه.

برگرفته از : برنامه نویس ، مجید آنلاین

[Opera 36]

در ادامه توضیحات دوستمون بگم که؛

ID با # مشخص میشه و کلاس با .

ID حالت شاخصی داره و unique هست یعنی هر المنت فقط میتونه یک ID داشته باشه

هر صفحه می تونه فقط یک المنت با همون ID داشته باشه

ولی کلاس unique نیست یعنی میتونید یک کلاس برای چند المنت استفاده بشه

چند کلاس روی همون المنت استفاده بشه

برای اونایی که یکبار استفاده میشه از id و برای اونایی که چند بار استفاده میشه از class استفاده کنم

مثال:

[b]#top[/b] {
background-color: #ccc;
padding-right: 20px;
}

[b].intro[/b] {
color: red;
font-weight: bold;
}
.
.
.
.
.


Heading


Matn asli


Har Chizi