ویژگی ها در css چگونه فراخوانی میشوند؟ تفاوت نوع معرفی کلاسها و آیدی ها در css چیست؟ تفاوت کلاس ها آی دی ها در چیست؟ در این جلسه به صورت کامل با این دو خاصیت که در آموزش HTML نیز به آن اشاره کردیم آشنا میشویم، در جلسه ی قبلی یعنی آشنایی با Selector ها، مفاهیم اولیه و اصلی این دو رو یاد گرفتیم. در این جلسه تفاوت هاشون رو یاد میگیریم و مثال های بیشتری رو ازشون مشاهده میکنیم.
سرفصلهای پست
دو سوال در مورد کلاس ها
همونطور که یاد گرفتیم، کلاس ها برای انتخاب عناصر خاصی بین عناصر هم نام به کار میرن. دو سوال ممکنه پیش بیاد:
۱. چطور یک عنصر خاص با یک کلاس خاص رو انتخاب کنیم؟
<h1 class="mizfa">Mizfa Website</h1> <p class="mizfa">Mizfa CSS</p> <span class="mizfa">Mizfa HTML</span>
و بنا به علتی مجبور شدیم به همگی کلاس یکسان بدیم!
حالا میخوایم یک سری دستورات CSS رو به عنصر دوم، یعنی p نسبت بدیم، چیکار باید کنیم؟
خب اولین راهی که ممکنه به ذهن ما برسه اینه که خیلی راحت، عنصر p رو صدا کنیم:
p { ... }
اما اگه دو عنصر p داشتیم چی؟
<p class="mizfa">Mizfa CSS</p> <p>Mizfa JS</p>
در اینجا، کافیه p رو صدا کنیم و به دنبال نام اون، نام کلاس رو همراه با نقطه “.” بنویسیم، یعنی به شکل زیر:
p.mizfa{ ... }
در اینجا، کد به این معناست: تگ p ای که کلاس mizfa داره رو بردار و بهش دستورات مورد نظر رو نسبت بده.
و حالا سوال بعدی:
۲. آیا یک عنصر (تگ)، میتونه بیشتر از یک کلاس داشته باشه؟
پاسخ این سوال، مثبته! کافیه در زمان تعریف کردن نام کلاس برای عنصر مورد نظر، یه فاصله بزاریم و نام کلاس بعدی رو هم بنویسیم، یعنی به شکل زیر:
<div class="mizfa mizfa2">Some content</div>
در این مثال، عنصر div دارای دو کلاس mizfa و mizfa2 هست و از دستورات هردو کلاس تبعیت میکنه.
.mizfa{ color: red; } .mizfa2{ 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:
<p class=”paraph1” id=”paraph2”>Id vs Class</p>
کد CSS:
.paraph1{ color: red; } #paraph2{ color:blue; }
نتیجه:
نتیجه گیری
- کلاس ها و آی دی ها خاصیتی از HTML هستند که نقش بسیار مهمی در استایل دهی زبان CSS دارند.
- کلاس ها و آیدی ها تفاوت هایی دارند.
- از کلاس ها میتوانیم در چندین عنصر استفاده شوند.
- آیدی ها تنها میتوانند برای یک عنصر مورد استفاده قرار گیرند.
بخش دیدگاه ها همیشه بازه، من و دوستانم آماده پاسخگویی به تمامی سوالات، انتقادات و پیشنهادات شما هستیم.
مدیر محتوا: علی اسمعیلی
6 پاسخ
چطور چند تا عنصر با چند تا کلاس خاص رو میشه انتخاب کرد؟ مثلا بگیم اگه شی ما p یا span بود و کلاسش A یا B بود رنگش آبی بشه.
سلام مهرشاد. سوالت یه مقدار مبهمه، اگه درست متوجه شدم میخوای عنصر p ای رو انتخاب کنی که مثلا دارای کلاس a هست. در مورد این مسئله، تو بخش اول همین مقاله صحبت کردیم. اما اگه منظورت این نیست میتونی یکم واضح تر توضیح بدی که کمکت کنم؟
توی متن مقاله گفتید استفاده از یک ID در چند عنصر (همون سه خطی که توی متن مقاله نوشتید) میتونه مشکل آفرین بشه، میتونید بگید چه مشکلاتی وجود داره بر حسب تجربتون؟ با یک اگه باشه مثال ممنون میشم.
در اصول کدنویسی به این صورت هست. و اکثر کسانی که کدی میزنن یا قالبی طراحی میکنن این مورد رعایت میکنن.
مشکل خاص فنی رخ نمیده ولی شما اصول و استانداری که اکثرا رعایت میکنن رو رعایت نکردی.
از طرفی وقتی میخوای یک کاری رو مشترک روی یک سری المان ها انجام بدی دلیلی نداری که حتما از ID چند بار در یک صفحه استفاده کنی. Class هست و از اون استفاده کن.
امیدوارم این موضوع برات حل شده باشه.
خیلی ممنون آموزش هاتون کامل و عالیه
سلام سهیل جان.
ممنونم از حضورت.