فاصله بین دو انتخابگر معنای مشخصی داره: عنصر دوم باید جایی داخل عنصر اول باشه. به این رابطه «نواده» می‌گیم. انتخابگر .note p همه پاراگراف‌های داخل یک عنصر با کلاس note رو می‌گیره؛ چه فرزند مستقیم باشن، چه داخل یک ظرف دیگه قرار گرفته باشن. این روش کمک می‌کنه ظاهر یک بخش محدود بمونه و متن‌های بیرون اون بخش تغییر نکنن.
مثال یک لینک توی فهرست رو انتخاب می‌کنه و لینک بیرونی رو آزاد می‌ذاره. توی فعالیت، متن کارت یک سطح داخل div قرار داره؛ انتخابگر نواده همچنان اون رو پیدا می‌کنه. خطای رایج چسبوندن دو انتخابگر بدون فاصله است: .note.p یعنی یک عنصر که هردو کلاس رو داره، نه پاراگراف داخل کارت. علامت > هم فقط فرزند مستقیم رو می‌گیره و برای ساختار این تمرین کافی نیست. اول محدوده کارت رو مشخص کن، بعد نوع عنصر داخل اون رو بنویس تا نتیجه قابل پیش‌بینی باشه.
✍️ مثال حل‌شده:
<nav><a href="#home">خانه</a></nav><a href="#help">راهنما</a>
<style>nav a { color: teal; }</style>
حالا نوبت توئه: پاراگراف .card p را به رنگ purple، اندازه ۱۸ پیکسل و line-height برابر ۳۰ پیکسل نمایش بده؛ پاراگراف .outside باید رنگ پایه rgb(31, 41, 55) بماند. ساختار تو‌در‌توی کارت را حفظ کن؛ قانون باید پاراگراف داخل div میانی را هم بگیرد.
فعالیت شما
پاراگراف .card p را به رنگ purple، اندازه ۱۸ پیکسل و line-height برابر ۳۰ پیکسل نمایش بده؛ پاراگراف .outside باید رنگ پایه rgb(31, 41, 55) بماند. ساختار تو‌در‌توی کارت را حفظ کن؛ قانون باید پاراگراف داخل div میانی را هم بگیرد.