نکاه کن اید مخصوصو به یک شی هست ولی کلاس مربوط به هر چند تا شی که بخای و نکته بعد تو میتونی یک ایدی رو به یک المنت بدی ولی ممیتونی چند تا کلاس رو به یک شی بدی که اگه با فریم ورکی مثه بوت استرپ کار کرده باشی چندتا کلاس رو میتونی بدی ولی ایدی رو نه البته اینی که میگی ایدی یکسان روشون اعمال شده عجیبه چون من یبار امتحان کردم و نشد !

سلام
ای دی منحصر به فرده
مثلا وقتی به تگ پی ای دی هلو میدید،
اگه بیاید یه یه چیز دیگه هم اون ای دی رو بدید به مشکل میخورید.
کلاس رو میتونید تا دلتون بخواد برای سلکت کردن به انواع تگ ها بدید.
برای سلکت کردن توی css هم برای ای دی از #
و برای کلاس باید از دات یا . استفاده کنید.

ای دی شدیدا منحصر به فرده.
جای ابهامی هست بگید

سلام دوست عزیز
فرق دارن با هم
ایدی برای یک عنصر هستش البته اگه به چند تا هم بدی مشکل به وجود نمی اد ولی می تونه مشکلاتی به وجود بیاره
تفاوت دیگه، اینه که آیدی ها همیشه بر کلاس ها، اولویت دارن. یعنی چی؟
یعنی اگه یک عنصر، همزمان دارای آیدی و کلاس باشه، ویژگی ­های اختصاص یافته به آیدی، بر ویژگی­ های اختصاص یافته به کلاس اولویت داره.
این لینک رو مطالعه کن متوجه میشی
https://mizfa.com/blog/css-class-vs-id/

سلام
توضیح سادش رو میشه گفت کلاس مثل اسم می مونه آی دی مثل کد ملی
اسم دو نفر می تونه علی باشه ولی کد ملی دو نفر نمی تونه یکی باشه

شما وقتی برای یه چیزی از class استفاده میکنی میتونی اون class را به چند تا تگ دیگه هم بدی و یا برای یه تگ چند تا class بذاری، ولی id فقط یکیه، به هر تگی یه id میتونی بدی و یه id برای هر تگ میتونی بذاری.

در پروژه های بزرگ تر قطعا تفاوتشان را درک خواهید کرد

ممنون از پاسخ هاتون دوستان ولی اکثرتون همون حرفی که خودم زدم رو تکرار کردید حالا بعضا با مثال‌های قشنگ.
@moeinbabaei
تنها پاسخی که نکته جدیدی رو گفتن دوستمون محمد معین بودن که گفتن آیدی از کلاس اولویت بالاتری در اجرا داره😃 که اینو نمیدونستم.

@doctorhoax
خیلی ممنونم محمد جان وظیفه بود.

سلام
ببینید به طور کلی اکثر مرورگر‌ها مشکلی در رندر کردن داکیومنتی که المنت‌های مختلف آیدی یکسانی دارن، ندارن(خصوصا مرورگر‌های جدیدتر). اما مشکلاتی هم داره این کار:
۱- بست پرکتیس نیست! این کار طبق معیار‌های w3 مشکل داره و کد ولید نیست. طبیعتا کسی اگه توی کدهای شما این مورد رو مشاهده کنه قضاوت‌های بدی می‌کنه.
۲- برای جاوااسکریپت مشکل‌ساز می‌شه، مخصوصا توی فریم‌ورک‌های قدیمی تر. بذارید براتون با مثال توضیح بدم:

<style>
#div1 {
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 1rem;
}
</style>
<div id="div1">Div 1</div>
<div id="div1">Div 2</div>
<script>
let div1 = document.getElementById('div1');
console.log(div1.innerText)
</script>

حالا ما اینجا دوتا المنت داریم، با آیدی‌های یکسان در حالی که قانونا باید آیدی یکتا باشه، چی می‌شه؟ جاوااسکریپت اولین المنت با این آیدی رو شناسایی می‌کنه که احتمال اینکه این قضیه مشکل‌ساز بشه خیلی زیاده. بعضی از فریم‌ورک و کتابخانه‌های دیگه هم هستن که به طور کلی ارور می‌دن در این حالت و می‌گن که آیدی باید یکتا باشه.

هنوز با جاوا اسکریپت آشنا نشدم اما ازت ممنونم فرزین @farzin که این نکته رو گفتی تا یادم بمونه بعدا یوقت آیدی رو به چنتا المنت ندم.

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

html

<h1 id="hi">سلام</h1>

css

hi {

color: red;

}

فقط این یک کلمه قرمز میشه

ولی میخوایم تعین کنیم که این فونت سلام علاوه بر قرمز بودنش میخواهیم فونت هم در کنارش تعین کنیم آن موقع از کلاس استفاده میکنیم

html

<h1 class="hi">سلام</h1>

css

.hello{
color:red;
font-family: Arial, sans-serif;
}
پس دویا چند تغیر تغیر با کلاس روی یک عنصر میتوانیم اعمال کنیم . البته با اایدی هم میشه همزمان هم فونت هم رنگ تغیر داد ولی در کلاس دسته بندی هم میشه به این منظور که اگر بخواهیم میتوانیم به اشتراک بگذاریم برفرض چند دکمه داریم در سایت میخواهیم همه را ابی کنیم و تغیر رنگ کنیم با کلاسی که اشتراک بین همه دکمه ها گذاشتیم میتوانیم یکجا همه را تغیر بدهیم با ارث بری به راحتی به اشتراک گذاشته میشود فقط کافیه در کلاس از اتربیوت ارث بری استفاده کرد . اتربیوت چی هست ؟
با استفاده از ویژگی‌ها (اتربیوت‌ها) می‌توان به عناصر HTML مشخصه‌هایی داد که نمونه‌هایی از آن‌ها شامل id و class src href هستند.
مثل
<div class="container"> تعین کلاس
<div id ="container"> تعین ایدی
<a href="#" class="chat-button">شروع چت</a> تعین لینک همه اینا اتربیوت هستند

که بعد نوشتن اتربیوت با پروپرتی ها به انها شکل میدهیم مانند زیر
ویژگی‌ها (Styles) یا خواص (Properties):

ویژگی‌ها (یا استایل‌ها) مشخصه‌هایی هستند که به عناصر در CSS اعمال می‌شوند و شامل عواملی مانند رنگ، اندازه فونت، فاصله و غیره می‌شوند.
این استایل‌ها به عناصر ظاهری زیباتر داده و رفتارهای بصری آن‌ها را تنظیم می‌کنند. به عنوان مثال:

css
.my-image {
width: 100px; / عرض تصویر /
height: auto; / ارتفاع به نسبت /
border: 2px solid red; / حاشیه قرمز /
}