کلاس ها و آیدی ها در CSS

ویژگی ها در css چگونه فراخوانی می‌شوند؟ تفاوت نوع معرفی کلاس‌ها و آیدی ها در css چیست؟ تفاوت کلاس ها آی دی ها در چیست؟ در این جلسه به صورت کامل با این دو خاصیت که در آموزش HTML نیز به آن اشاره کردیم آشنا می‌شویم، در جلسه ی قبلی یعنی آشنایی با Selector ها، مفاهیم اولیه و اصلی این دو رو یاد گرفتیم. در این جلسه تفاوت هاشون رو یاد می‌گیریم و مثال‌های بیشتری رو ازشون مشاهده می‌کنیم.

دو سوال در مورد کلاس‌ها

همونطور که یاد گرفتیم، کلاس ها برای انتخاب عناصر خاصی بین عناصر هم نام به کار میرن. دو سوال ممکنه پیش بیاد:

۱. تعدادی عنصر به شکل زیر داریم

<h1 class="shahcode">Shah Code Website</h1>
<p class="shahcode">Shah Code CSS</p>
<span class="shahcode">Shah Code HTML</span>

و بنا به علتی مجبور شدیم به همگی کلاس یکسان بدیم!

حالا می‌خوایم یک سری دستورات CSS رو به عنصر دوم، یعنی p نسبت بدیم، چیکار باید کنیم؟

خب اولین راهی که ممکنه به ذهن ما برسه اینه که خیلی راحت، عنصر p رو صدا کنیم:

p {
   ...
}

اما اگه دو عنصر p داشتیم چی؟

<p class="shahcode">Shah Code CSS</p>
<p>Shah Code JS</p>

در اینجا، کافیه p رو صدا کنیم و به دنبال نام اون، نام کلاس رو همراه با نقطه “.” بنویسیم، یعنی به شکل زیر:

p.shahcode{
   ...
}

در اینجا، کد به این معناست: تگ p ای که کلاس shahcode داره رو بردار و بهش دستورات مورد نظر رو نسبت بده.

و حالا سوال بعدی:

۲. آیا یک عنصر (تگ)، می‌تونه بیشتر از یک کلاس داشته باشه؟

پاسخ این سوال، مثبته! کافیه در زمان تعریف کردن نام کلاس برای عنصر مورد نظر، یه فاصله بزاریم و نام کلاس بعدی رو هم بنویسیم، یعنی به شکل زیر:

<div class="shahcode shahcode2">Some content</div>

در این مثال، عنصر div دارای دو کلاس shahcode و shahcode2 هست و از دستورات هردو کلاس تبعیت می‌کند.

.shahcode{
color: red;
}

.shahcode2{
font-size: 30px;
}

بدین ترتیب، متن درون عنصر مورد نظر، هم قرمز و هم دارای سایز ۳۰ پیکسل خواهد بود!

تفاوت آیدی ها و کلاس ها

مهم ترین تفاوتی که ممکنه بین این دو پیش بیاد، اینه که کلاس ها می‌تونن برای چندین و چند عنصر به کار برود.

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

برای مثال:

<div class="myclass"></div>
<p class="myclass"></p>
<h4 class="myclass"></h4>

این قطعه از کد کاملا درسته و مشکلی نداره. هر سه عنصر، توسط دستورات کلاس myclass در فایل CSS تغییر می‌کنن.

اما کد زیر:

<div id="myclass"></div>
<p id="myclass"></p>
<h4 id="myclass"></h4>

درست نیست و می‌تونه مشکل آفرین باشه.

تفاوت دیگه، اینه که آیدی ها همیشه بر کلاس ها، اولویت دارن. یعنی چی؟

یعنی اگه یک عنصر، همزمان دارای آیدی و کلاس باشه، ویژگی ­های اختصاص یافته به آیدی، بر ویژگی­ های اختصاص یافته به کلاس اولویت داره.

به مثال زیر توجه کنید:

کد HTML:

<h1 class=”paraph1”  id=”paraph2”>Id vs Class</h1>

کد CSS:

.paraph1{
color: red;
}

#paraph2{
color:blue;
}

نتیجه: