انتخاب‌گرهای مشتق CSS

انتخاب‌کننده‌ی مشتق

با تعریف استایل بر اساس رابطه‌ی محیطی یک عنصر، می‌توانید برچسب‌ها را ساده‌تر کنید.

در CSS1، انتخاب‌کننده‌ای که برای اعمال قوانین به این روش استفاده می‌شود، انتخاب‌کننده‌ی محیطی (contextual selectors) نامیده می‌شود، زیرا آن‌ها برای اعمال یا جلوگیری از یک قانون به رابطه‌ی محیطی وابسته هستند. در CSS2، آن‌ها به عنوان انتخاب‌کننده‌ی مشتق نامیده می‌شوند، اما مهم نیست که شما آن‌ها را چگونه نام‌گذاری کنید، عملکرد آن‌ها یکسان است.

انتخاب‌کننده‌ی مشتق به شما اجازه می‌دهد تا بر اساس رابطه‌ی上下ایی در مستند، استایل یک برچسب را تعیین کنید. با استفاده از انتخاب‌کننده‌ی مشتق به صورت منطقی، می‌توانیم کد HTML را ساده‌تر کنیم.

مثلاً، اگر می‌خواهید عناصر strong در لیست به صورت ایتالیک باشند، نه به صورت معمولی تیره، می‌توانید یک انتخاب‌کننده‌ی مشتق (descendant selector) تعریف کنید:

li strong {
    font-style: italic;
    font-weight: normal;
  }

لطفاً رابطه‌ی بین کد‌های آبی‌رنگ برچسب‌گذاری شده به عنوان <strong> را توجه کنید:

<p><strong>من به صورت تیره هستم، نه ایتالیک، زیرا من در لیست نیستم، بنابراین این قانون برای من اعمال نمی‌شود</strong></p>
<ol>
<li><strong>من به صورت ایتالیک هستم. این به دلیل اینکه عناصر strong در داخل عناصر li قرار دارند است.</strong></li>
<li>من یک فونت معمولی هستم.</li>
</ol>

در مثال بالا، تنها استایل متن عناصر li در عناصر strong به صورت ایتالیک است، نیازی به تعریف class یا id خاص برای عناصر strong نیست، کد ساده‌تری خواهد بود.

ببینید که قوانین CSS زیر چیست:}

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

در زیر HTML تأثیرگذار آن آورده شده است:

<p>کلمه برجسته‌شده در این پاراگراف است<strong>قرمز</strong>.</p>
<h2>این زیرعنوان نیز قرمز است.</h2>
<h2>کلمه برجسته‌شده در این زیرعنوان است:<strong>blue</strong>.</h2>

محتوای مرتبط

اگر می‌خواهید اطلاعات بیشتری در مورد انتخاب‌گرهای مشتق بدست آورید، لطفاً مطالب زیر از آموزش پیشرفته CodeW3C.com را بخوانید: