تفاوت این کد ها در css چیست؟

[سیدرضا بازیار]

در زبان برنامه نویسی css میتونیم واسه یه div از id="" و class="" استفاده کنیم
چه فرقی داره که از id استفاده کنیم یا class ؟
چه موقع باید از id استفاده کنیم و چه موقع از class استفاده کنیم؟

تفاوت سه کد زیر چیه و چه موقع از هر کدوم استفاده میکنیم؟

div {
}

.div {
}

#div {
}

[masoud_pnu]

هر کد Css از دو بخش تشکیل میشه: سلکتور و توصیفش.سلکتور حالت اشاره گر داره و به المانی از HTML که قصد دارید استایل بهش بدید اشاره میکنه.یعنی میگید بهش که فرضا المان DIV این خصوصیات رو داشته باشه.
هر کد Css به سه صورت تعریف میشه که شما در بالا آوردید.
مورد اول مال زمانیه که اسم المان HTML بصورت مستقیم فراخوانی میشه.یعنی تمام اون المان ها در تمام قسمت های پیج یک استایل مشخص داشته باشن.مثلا تمام div ها لبه هاشون پخ باشه(گرد شده باشه).
مورد دوم مربوط به زمانیه که شما یه کلاس تعریف می کنید که مفهومی تقریبا مشابه تعریف کلاس در برنامه نویسی شی گرا داره.فرزند خصوصیات والد رو به ارث می بره.دلیل اصلی استفاده از کلاس قابلیت حمل اون هست.به چه معنا؟به این معنی که شما تعداد زیادی از این کلاس هارو میتونید در یه فایل با پسوند CSSذخیره کنید و هروقت خواستید به صفحه تون attach کنید.دقیقا کاری که فریم ورک های رایج(bootstrap،jquery ui و...)انجام میدن.
مورد سومم که فراخوانی با id هست.در این حالت شما به المانی که فلان ID رو داره میگید که این استایل رو بگیر.کاربردش کجاست؟فرض کنید تمام divهای موجود دریه صفحه باید لبه پخ داشته باشن،ولی یکی باید لبه اش تیز باشه.اینجا به اون یکی id میدید،بعد سلکتور رو به هش(#) تعریف می کنید.

[سیدرضا بازیار]

ممنون
اگه ممکنه یکم بیشتر توضیح بدید (زیر دیپلم)
در مورد id و class یکم گیچ شدم
چون هر دو رو میشه بکار برد و تفاوت اونا رو متوجه نشدم

[omidparkour]

درود
از ID زمانی استفاده میشه که بخوایم فقط یکبار از اون در صفحه استفاده کنیم اما اگر به عنصری class بدیم میتونیم از اون class چندبار در صفحه استفاده کنیم

[دانیال دزفولی]

div {
/* تگ div */
}




.div {
/* کلاس div */
}




#div {
/* آی دی div */
}

[2020s1371]

گاهی نوشته میشه :
body.div{

}
که فکر میکنم با اینکار خصوصیاتی برای دیوهایی مشخص میکنیم که داخل تگ بادی باشند

گاهی هم نوشته میشه:
.section>div{

}

گاهی هم ازعلامت <- استفاده میشود

دوستان لطف کنند و در مورد هر سه توضیح بدند ممنون میشم
(حدس های خودم رو هم بیان کردم)

[سیدرضا بازیار]

div > ul {
}
توی کد بالا ul هایی که مستقیما فرزند div هستن رو انتخاب کردیم.
یعنی هر کدی رو بدیم فقط بر فرزند مستقیم div اثر میزاره و بر سایر ul هایی که فرزند این ul هستن اثر نداره
مثلا:


<div>
<ul>
<ul>
</ul>
</ul>
</div>

در این کد فقط بر ul اول اثر میزاره و بر ul دوم (که درون ul اول هستن) هیچ اثری نداره