دوباره خوش آمد میگم
خب همونطور که به جلو پیش میریم
توی این بخش مبانی CSS
یه سری مفاهیم پایه‌ای
و واقعاً مهم تئوری وجود دارن
که باید حتماً اون‌ها رو درک کنید
تا در نهایت بتونید CSS رو مسلط بشید
برای همین این بخش شامل پنج درس تئوریه
و این اولینشه
و کاملاً درباره اینه که چه اتفاقی میفته
وقتی چند قانون CSS مختلف
روی یه عنصر یکسان اعمال بشن؟
تا اینجای کار که کد نوشتیم
چند موقعیت ایجاد کردیم
که توش چندین دستور CSS
و در نتیجه چندین قانون CSS
روی یه عنصر یکسان اعمال شدن
که من بهش میگم سلکتورهای متضاد
پس بیاید یاد بگیریم توی این شرایط چه اتفاقی میفته
اینجا یه مثال داریم که شبیه همون کدی هست
که توی پروژه‌مون نوشتیم
این پاراگراف نویسنده‌ست
که یه جایی توی کدمون داریم
اما اینجا یه ID داریم به اسم author-text
و یه کلاس داریم به اسم author
و بعد در سمت راست
سه قانون داریم
که عملاً روی این عنصر اعمال شدن
همونطور که کاملاً مشخصه
هر سه سلکتور مختلف
و در نتیجه هر سه قانون
یه عنصر یکسان رو انتخاب می‌کنن
پس حالا سوال بزرگ اینه
کدوم یکی از این قوانین اعمال میشه؟
خب جوابش اینه که در واقع همه‌شون اعمال میشن
پس همه قوانین و همه ویژگی‌هایی
که داخل اون قوانین هستن روی این عنصر اعمال میشن
اما اگه دقیق‌تر نگاه کنیم می‌بینیم
که اعلان‌های font-size با هم تداخل دارن درسته؟
تو اولی میگه
font-size باید 18 باشه بعد 20 پیکسل
و بعد 22 پیکسل
پس کدوم یکی اعمال میشه؟
18 20 یا 22 پیکسل خواهد بود؟
خب بیاید یاد بگیریم CSS چه قوانینی داره
برای اینکه چنین اعلان‌های متضادی رو حل کنه
پس وقتی چند اعلان مختلف
برای یه عنصر یکسان وجود داشته باشه
مثل همین مثالی که داریم
اون چیزی که اهمیت داره سلکتورها هستن
پس بالاترین اولویت فعلاً مربوط به سلکتورهای ID هست
یعنی اگه یه سلکتور ID وجود داشته باشه
همون قانونیه که اعمال میشه
حالا اگه چند سلکتور ID وجود داشته باشه
آخرین اون‌هاست که اعمال میشه
البته در واقعیت
ماجرا کمی پیچیده‌تر از این حرفاست
چون مفاهیم زیادی درگیر هستن
مثل cascade و specificity سلکتورها
ولی فعلاً لازم نیست به عنوان مبتدی
این جزئیات رو بدونید
پس به نظرم همین مقدار اطلاعاتی
که توی این اسلاید بهتون میدم
کافیه که بتونید تعارض‌های خودتون رو حل کنید
توی کد CSS خودتون
خیلی خب
ولی به هر حال اگه هیچ سلکتور ID وجود نداشت
مرحله بعدی توی اولویت سلکتور کلاس
یا سلکتور شبه‌کلاسه
و باز هم اگه چندتا از این‌ها وجود داشته باشن
آخرین سلکتوری که توی کد اومده اعمال میشه
بعد از اون می‌رسیم به سلکتور عنصر
یعنی اگه نه ID باشه و نه کلاس
اون وقت سلکتور عنصره که اعمال میشه
و باز هم اگه چندتا باشه
آخرینش اعمال میشه
در نهایت چیزی هم هست
به اسم سلکتور همگانی (universal)
که در موردش توی درس بعدی بیشتر میگیم
مهم اینه که سلکتور همگانی
کمترین اولویت رو بین همه داره
ولی حالا برگردیم به مثالمون
و قوانینی که اینجا داریم رو در نظر بگیریم
الان باید بتونیم تعارضی که داشتیم
رو حل کنیم
اینجا یه سلکتور کلاس داریم
بعد یه سلکتور ID داریم
و بعد یه سلکتور عنصر درسته؟
پس بر اساس قوانینی که الان یاد گرفتیم
این سلکتور ID با مقدار author-text هست
که تعیین می‌کنه font-size این عنصر چی باشه
پس برای ویژگی font-size که تضاد داشت
این سلکتور ID هست که اعمال میشه
اما یادتون باشه که font-style font-family
و رنگ از بقیه سلکتورها
هنوز اعمال میشن درسته؟
این همون چیزیه که توی اسلاید قبلی گفتم
پس اگه چند قانون مختلف داشته باشیم
یعنی چند سلکتور که یه عنصر رو انتخاب می‌کنن
همه‌شون به نوعی اعمال میشن
اون موقع همه‌ی اون قوانین اعمال میشن
پس این قوانین اینجا
فقط برای حل کردن خواص متناقض هستن
مثل اندازه فونت در این حالت
چون دوباره
اندازه فونت در هر سه قانون وجود داره
که الان روی المان نویسنده ما اعمال میشن
خب
و اینها مهم‌ترین قوانینی هستن
که باید برای رفع تداخل اعلان‌ها بدونی
ولی فقط برای کامل بودن بحث
در واقع چیزهایی وجود دارن که اولویت بیشتری دارن
از انتخابگر ID
یکی از اون‌ها استایل‌های خطی (inline styles) هستن
پس یادت باشه که ما استایل‌های inline رو
با استفاده از ویژگی style در HTML تعریف می‌کنیم
حالا از اونجایی که در کل نباید این کار رو انجام بدیم
این خیلی مهم نیست
ولی باید بدونی که این استایل‌ها
در واقع اولویت بیشتری نسبت به استایل‌هایی دارن
که با انتخابگر ID تعریف شدن
و بعد با بالاترین اولویت
اعلان‌هایی هستن که با کلیدواژه important مشخص شدن
و کلیدواژه important
در اصل فقط یه ترفندیه که می‌تونی استفاده کنی
به عنوان آخرین راه‌حل برای رفع تعارض‌ها در CSS
ولی معمولاً نباید استفاده بشه
پس همونطور که گفتم
فقط باید در آخرین حالت استفاده بشه
ولی چیزی که مهمه اینه که این واقعاً بالاترین اولویت
ممکنه
هر وقت یه اعلان رو با important مشخص کنیم
همونه که اعمال میشه
خب با همه‌ی این توضیحات
بریم دوباره سراغ کدمون
و در عمل اینو ببینیم
بیایم یه مثال خیلی ساده بسازیم
با این پاراگرافی که داخل فوتر هست
پس الان اینجا ما یه ID به نام copyright اضافه کردیم
ولی حالا بیایم یه کلاس هم بهش اضافه کنیم
فقط برای اینکه یه مثال مشابه درست کنیم
مثل چیزی که توی اسلاید داشتیم
پس اینجا دارم یه کلاس به نام copyright اضافه می‌کنم
پس یه کلاس می‌تونه دقیقاً همون اسم ID رو داشته باشه
این اصلاً مشکلی نداره
و حالا می‌خوام کاری بکنم
که قبلاً انجام نداده بودیم
که اینه که یه کلاس دیگه اضافه کنیم
پس در واقع می‌تونیم چندین کلاس اضافه کنیم
و تنها کاری که باید بکنیم اینه که یه فاصله بذاریم
پس من کلاس text رو هم اضافه می‌کنم
و حالا این یکی هم کلاس copyright داره
و هم کلاس text خب؟
پس ما می‌تونیم این المان رو با هر دوی اون‌ها انتخاب کنیم
پس بیایم سعی کنیم این کار رو آخر کد انجام بدیم
من فقط یه کامنت دیگه اینجا اضافه می‌کنم
حل تعارض
خب حالا بیایم سعی کنیم چند رنگ متفاوت برای این متن بذاریم
اینجا میام copyright رو انتخاب می‌کنم
و رنگش رو قرمز می‌ذارم
بعد کلاس copyright
اینجا رنگش رو آبی می‌ذارم
بعد کلاس text
اینجا رنگش رو زرد می‌ذارم
و در نهایت من همینطور می‌خوام با انتخابگرهای المان انتخابش کنم
پس اینجا از انتخابگر نواده استفاده می‌کنم
footer و بعد p
پس فقط المان p داخل footer رو انتخاب می‌کنم
ولی یادت باشه که این‌ها هنوز المان هستن
و اینجا رنگ سبز رو اعمال می‌کنم
پس الان ما این چهار قانون رو داریم
و بنابراین این چهار انتخابگر روی اون المان اعمال میشن
خب به نظرت چه رنگی
روی متن اعمال میشه؟
خب بیایم ببینیم
و در واقع قرمز شد
و این به این دلیله که ما یه انتخابگر ID داریم اینجا
و انتخابگر ID اولویت بیشتری داره نسبت به
مثلاً این یکی یا اون یکی یا اون یکی
چون این‌ها انتخابگر کلاس هستن
و این‌ها انتخابگر المان هستن
در واقع VS Code به ما کمک می‌کنه
که این تعارض رو حل کنیم
به هر حال
پس اگر ما موس رو روش ببریم
یه راهنما داریم که میگه selector specificity
و اونجا ما یه عدد یک در اولین موقعیت داریم
و اینجا توی کلاس یه عدد یک در موقعیت دوم داریم
و اینجا توی المان یه عدد دو داریم
ولی اون اهمیتی نداره
چون فقط یه عدد در موقعیت سومه
و بنابراین موقعیت اول
بالاترین اولویت رو داره
دومی اولویت دوم رو داره
و بعد المان‌ها خب؟
حالا دوباره قوانین بیشتری هم اینجا هستن
مثلاً دلیل اینکه چرا یه عدد دو وجود داره
ولی فعلاً روی اون تمرکز نکنیم
خب
چیزی که مهمه اینه که این یه ID هست
و بنابراین در حال حاضر رنگ قرمز اعمال می‌شود
ما همین‌طور می‌توانیم این موضوع را در بخش Inspector ببینیم
یعنی در ابزارهای توسعه‌دهنده (DevTools)
پس این عنصر رو اینجا بررسی کنید
بعد می‌بینید که اینجا به کمی فضای بیشتر نیاز داریم
اما چیزی که می‌بینید اینه که اینجا یک «کپی‌رایت» داریم
خب این همونیه که اینجاست
ما همچنین یکی دیگه داریم
که از قبل برای اندازه فونت اعمال شده بود
پس اینجا الان هر دوشون اعمال می‌شن
و بعد همین‌طور این سه‌تای دیگه رو هم داریم
این سه قانون هم اینجا وجود دارن
و می‌بینید که همه‌ی اون‌ها اینجا
در واقع خط‌خورده هستن درسته؟
یعنی روشون یک خط کشیده شده
که یعنی اون‌ها اعمال نمی‌شن خب؟
حالا چی می‌شد اگه این یکی اصلاً وجود نداشت؟
یعنی اگه این یکی رو خاموش کنیم
که تقریباً معادل پاک کردن این کده
خب فکر می‌کنید بعدش چه اتفاقی میفته؟
توی اون حالت
ما دو تا انتخابگر کلاس داریم و یک انتخابگر المنت
پس سعی کنید حدس بزنید
و بعد یا این کد رو پاک کنیم
یا تیک این باکس رو برداریم
و بله متن زرد شد
و دلیلش اینه که
الان ما این دو انتخابگر رو داریم
با یک سطح سلسله‌مراتب یکسان
یعنی با اولویت برابر
و توی چنین شرایطی
همیشه آخریه اعمال میشه
و اینجا هم همون بود درسته؟
حالا اگه اون رو هم خاموش کنیم
خب طبیعتاً آبی میشه
و در نهایت فقط اگه هیچ‌کدوم از اون سه‌تا وجود نداشتن
اون‌وقت متن سبز می‌شد
امیدوارم این براتون قابل‌فهم بوده باشه
و بیاید چند وضعیت دیگه رو هم اینجا بررسی کنیم
مثلاً
این المنت اینجا فکر می‌کنم یک کلاس داره
یا در واقع یک آی‌دی
آره این یه آی‌دی به اسم author داره
و طبیعتاً یک انتخابگر المنت هم داره
که برای همه پاراگراف‌ها اعمال میشه
و اینجا ما با تضاد در اندازه فونت روبه‌رو میشیم
و این همون مثالیه
که توی اسلاید بررسی کرده بودیم
خب
پس این یکی خیلی واضحه
حالا بیاید این h1 رو بررسی کنیم
چون اینجا قوانین زیادی دارن اعمال می‌شن
اما در واقع
به‌نظر نمیاد در تضاد باشن
یا در واقع در تضاد هستن
اینجا رنگ باید خاکستری باشه
ولی اینجا قراره آبی باشه
پس بریم بالاتر جایی که این اتفاق میفته
و بله
این سه قانون اینجا هستن که اعمال می‌شن درسته؟
اما همه‌شون فقط انتخابگر المنت هستن
هیچ آی‌دی یا کلاسی وجود نداره
و بنابراین
دلیل اینکه رنگ در واقع آبی میشه
و نه خاکستری اینه که این انتخابگر
آخرتر در کد ظاهر شده
اگه اینو اول بذاریم
اون‌وقت می‌بینید که متن واقعاً خاکستری میشه
خب
اما بذارید اون رو برگردونیم
باشه
و حالا یک مثال نهایی با لینک‌ها
پس بیاید بریم پایین‌تر اینجا
و همین‌طور یادتون باشه که توی اسلاید گفتیم
این شبه‌کلاس‌ها
در واقع نسبت به المنت‌ها هم اولویت دارن
و بنابراین حتی اگه اینجا اینطوری بذاریم
یعنی اگه تگ‌های a رو فقط اینطوری انتخاب کنیم
بدون هیچ شبه‌کلاسی
مثلاً دوباره رنگ رو قرمز بذاریم
دلیل اینکه این
روی لینک‌ها هیچ اثری نداره اینه که
اون یکی اولویت بالاتری داره
چون توی انتخابگرش شبه‌کلاس داره
و این یکی نداره درسته؟
و بنابراین اگه الان این رو انتخاب کنیم
می‌بینید که هر دو قانون اعمال می‌شن
اما رنگ همون‌طور که گفتم
طبیعتاً از اون یکی میاد
و دوباره دلیلش اینه که اینجا
انتخابگر شامل شبه‌کلاسه
در حالی که اون یکی صرفاً یک انتخابگر المنت ساده‌ست
باشه
و خب این چیزیه که در حال حاضر باید بدونید
ما دوباره با بعضی از این موقعیت‌ها جلوتر
توی دوره برخورد می‌کنیم
و اون موقع یکم بیشتر دربارش توضیح میدم
اما فعلاً
این تمام چیزیه که می‌خواستم در این موضوع بدونید
که می‌تونه برای مبتدی‌ها کاملاً گیج‌کننده باشه
وقتی که شروع می‌کنن به نوشتن کدهای CSS خودشون
و بعد قوانین با هم تداخل پیدا می‌کنن
و اون‌ها واقعاً نمی‌فهمن که چه اتفاقی داره می‌افته
پس فکر می‌کنم این موضوع مهمه
و امیدوارم از این ویدیو لذت برده باشی و برات مفید بوده باشه
آه و فقط یک نکته‌ی آخر
که واقعاً می‌خواستم بهت نشون بدم
قبل از اینکه اینجا رهایت کنم کلمه‌ی کلیدی important هست
پس یادت باشه که کلمه‌ی کلیدی important
باعث می‌شه یک declaration اهمیت بیشتری داشته باشه
در واقع نسبت به تمام بقیه
پس بیا دوباره برگردیم پایین اینو inspect کنیم
و البته همونطور که قبلاً دیدیم این سلکتور اینجاست
که پایین‌ترین اولویت رو از همه داره
چون فقط یک element selector هست
اما اگه الان اینجا کلمه‌ی important رو اضافه کنیم مثل این
یعنی !important
اون‌وقت یک‌دفعه متن سبز می‌شه درسته؟
پس درست همونطور که اینجا می‌بینی
اما دوباره می‌گم این بیشتر شبیه یک حقه‌ست
که معمولاً نباید ازش استفاده کنی
فقط وقتی که واقعاً واقعاً نمی‌تونی بفهمی
چه اتفاقی توی کدت می‌افته
اما حتی در اون شرایط هم به جای استفاده از important
کاری که احتمالاً باید بکنی اینه که سلکتورهای ساده‌تر بنویسی
پس این هم یک قانون مهمه
و یک نکته‌ی کلیدی
که باید از این جلسه با خودت داشته باشی
پس همیشه سلکتورهات رو تا جای ممکن ساده بنویس
و زیاد از nested کردن استفاده نکن
یا اینکه IDهای زیاد اضافه نکن
و یا چندین کلاس رو همزمان توی یک سلکتور قرار نده خب؟
پس من اینو همینجا برایت می‌ذارم
ولی کامنتش می‌کنم تا اجرا نشه
و در واقع ما به هیچ‌کدوم از این‌ها نیاز نداریم
بذار دوباره فعالش کنم و همه‌ش رو کامنت می‌کنم باشه؟
و با این
فعلاً خداحافظ و تو رو در ویدیوی بعدی می‌بینم