حالا بیایید کدی که برای CSS نوشتیم
رو یکم بهتر کنیم
با ترکیب کردن بعضی از سلکتورها
شاید متوجه شده باشید
که ما دقیقا یک فونت یکسان
برای همه‌ی المنت‌هامون اینجا استفاده کردیم درسته؟
پس این شش قانون CSS که اینجا داریم
همه‌شون یک استایل فونت
یا بهتر بگیم font-family روی sans-serif دارن درسته؟
و می‌بینید که VS Code درواقع این تکرارها رو
توی همه‌ی قوانین مشخص می‌کنه
پس این کار یکم تکراریه درسته؟
و همینطور کار درستی هم نیست
چون مثلا فرض کنید یه دفعه خواستیم
فونت رو تغییر بدیم و یه چیز دیگه بذاریم
اون وقت مجبور می‌شیم
بریم سراغ همه‌ی این قوانین
و font-family رو توی همشون یکی‌یکی تغییر بدیم
پس به جای این کار می‌تونیم یک لیست سلکتور بسازیم
تا چند تا المنت رو با هم انتخاب کنیم
و بعد font-family رو روی اون لیست اعمال کنیم
خب بذارید نشون بدم چطور می‌تونیم این کارو بکنیم
و بیاید اول همینجا انجامش بدیم
می‌خوایم المنت‌های h1
و h2 و h3 رو انتخاب کنیم
و همونطور که می‌بینید
روش نوشتنش استفاده از ویرگول‌هاست خب؟
پس اینجا ما میایم المنت‌های h1
و h2 و h3
و h4
و p و همینطور همه‌ی المنت‌های li رو انتخاب می‌کنیم
خب
حالا می‌تونیم این متن رو برداریم و cut کنیم
و اینجا paste کنیم
و حالا می‌تونیم از بقیه‌ی سلکتورها حذفش کنیم
خوبه
و اگه الان فایل رو ذخیره کنم
صفحه دقیقا همون شکلی می‌مونه
و همینطوره
خب
الان Prettier کد CSS ما رو اینطوری فرمت کرد
یعنی برای هر المنت یک خط جدا
و اینطوری خوندنش راحت‌تره
و حالا اگه بخوایم فونت رو تغییر بدیم
مثلا بذاریم روی serif که درواقع پیش‌فرضه
وقتی ذخیره کنم می‌بینید
که همه‌ی المنت‌ها یکجا تغییر می‌کنن درسته؟
پس همه‌شون حالا متن با فونت serif دارن
و خب اگه دوباره برگردونیمش
همه‌شون با هم تغییر می‌کنن درسته؟
پس حالا همه‌جا فونت serif داریم
البته به جز توی فوتر
پس این یه چیزی هست که باید درستش کنیم
برای راحت‌تر شدن کار
بیاید این متن رو
داخل یک پاراگراف بذاریم
پس میایم توی HTML
خیلی مهمه که این کار رو بکنید
خب یک المنت جدید اینجا بسازید
که خودش به صورت خودکار بسته می‌شه
بعد این متن رو بگیرید
و اینجا بذاریدش
و حالا می‌بینید این پاراگراف
دقیقا مثل بقیه دیده می‌شه خب؟
پس این مرحله رو جا نندازید حتما انجامش بدید
چون الان برای مثال بعدی بهش نیاز داریم
و درواقع همین حالا بیاید اون مثال رو ببینیم
پس اندازه‌ی پاراگراف‌هامون ۲۲ پیکسله
و حالا اون پاراگرافی که توی فوتره
اونم ۲۲ پیکسله
ولی معمولا متنی که توی فوتر هست
خیلی کوچیک‌تر از بقیه‌ی متن‌هاست
چون فقط یه اطلاعات جانبی و کم‌اهمیته
و برای همین باید این متن
که توی این پاراگرافه کوچیک‌تر باشه
از متن بقیه‌ی پاراگراف‌ها
و یکی از راه‌ها برای این کار
اینه که سلکتورها رو به شکل دیگه‌ای ترکیب کنیم
پس بیاید مرور کنیم
اینجا ما شش سلکتور رو
با هم توی یک لیست ترکیب کردیم
پس می‌گیم سلکتوری که اینجاست یک سلکتور لیستیه
پس این همچنان یک سلکتوره
ولی در قالب یک لیست خب؟
این یک راه ترکیب سلکتورهاست
ولی حالا می‌خوام یه راه دیگه برای ترکیب سلکتورها بهتون بگم
که هدفش همونطور که گفتیم
کم کردن سایز فونت اینجاست
پس حالا می‌خوایم از چیزی به اسم descendant selector استفاده کنیم
که به این شکل نوشته می‌شه
اول المنت footer رو انتخاب می‌کنیم
بعد یک فاصله و بعد selector برای p
و کاری که این انجام می‌ده
اینه که همه‌ی المنت‌های p رو انتخاب می‌کنه
که داخل المنت‌های footer باشن
برای همین بهش می‌گیم descendant selector
چون المنت p فرزند footer هست
توی HTML ما
و به همین خاطر این سلکتور
میاد همه‌ی این پاراگراف‌ها رو انتخاب می‌کنه
که فرزند عناصر footer هستند
پس اگر حالا اندازه فونت را اینجا تنظیم کنیم
روی مقداری کوچکتر
مثلاً ۱۶ پیکسل
می‌بینید که بقیه‌ی پاراگراف‌ها همچنان عادی هستند
اما در واقع این پاراگرافی که داخل footer است
حالا فقط ۱۶ پیکسل کوچک شده
و امیدوارم ببینید چقدر می‌تونه مفید باشه
سلکتور فرزند (descendant selector) مثل اینجا
پس در واقع همیشه ازش استفاده کنید
اما در این مورد این خیلی هم پایدار نیست
چون به این شکل
سلکتور اساساً ساختار HTML رو بازتاب می‌ده
که می‌تونه باعث مشکل بشه
و برای اینکه بهتون نشون بدم
بذارید یک سلکتور فرزند دیگه بنویسیم
خب توی این حالت
فرض کنیم می‌خوایم این پاراگراف اینجا رو انتخاب کنیم
که داخل header هست
یادتون باشه که داخل مقاله (article) یک header داریم
همین اینجا و یک پاراگراف داریم
فرض کنیم می‌خواستیم اون رو italic کنیم
یعنی متنش رو کج نشون بدیم
پس با استفاده از چیزی که تازه یاد گرفتیم می‌تونستیم بگیم header
و بعد پاراگرافی که اون داخل هست
و بعد بگیم font-style و مقدارش رو بذاریم italic
خب پس این درست کار کرد
اما حالا تصور کنید به هر دلیلی
یک پاراگراف هم به این عنصر header این بالا اضافه کردیم
که اینجاست توی صفحه
خب بیاید امتحان کنیم
یادتون باشه که اینجا یک header دیگه هم داریم درسته؟
پس همونطور که گفتم یک p اینجا اضافه می‌کنیم: پاراگراف تست
و می‌بینید که این یکی هم حالا italic شده
اما چیزی که ما می‌خواستیم فقط این پاراگراف اینجا بود
که italic بشه و نه اون یکی درسته؟
پس باید یه جوری اینو حل کنیم
و در واقع می‌تونیم حلش کنیم
خیلی هم سخت نیست
خب حداقل توی این مورد
چون این header اینجا داخل article هست
و اون یکی نیست درسته؟
پس ما در واقع می‌تونیم یک سلکتور فرزند تو در تو بسازیم
یعنی می‌تونیم یک فرزند داخل فرزند داشته باشیم
منظورم اینه که اینو بنویسیم
پس ما فقط پاراگراف‌هایی رو می‌خوایم که داخل headerها هستند
که خودشون داخل article هستند تا italic بشن
خب حالا ذخیره‌اش کنیم
و حالا فقط این یکی italic شده
و اون یکی دیگه نیست
پس این در واقع جواب داد
اما ما حالا حتی بیشتر ساختار HTML رو
داخل سلکتورهای CSS خودمون کدگذاری کردیم
و این می‌تونه در آینده نگهداری کد رو سخت کنه
اگر روزی HTML رو تغییر بدیم
پس این ایده‌ی خوبی نیست
خب اگه بهش فکر کنیم
آیا خیلی بهتر نمی‌شد
اگر راهی داشتیم که به بعضی از عناصر اسم بدیم
و بعد با همون اسم‌ها انتخابشون کنیم؟
خب در واقع می‌تونیم این کار رو بکنیم
و این دقیقاً موضوع درس بعدیه
پس بریم سراغ اون همین الان