سی ایس ایل مشتق انتخاب گر

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

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

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

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

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

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 {
     رنگ: قرمز;
     }
h2 {
     رنگ: قرمز;
     }
h2 strong {
     رنگ: آبی;
     }

درج ذیل، اس کی اثر زدگی کا HTML ہے:

<p>اس پیراگرفت میں مضبوط طور پر زور دیئے گئے لفظ <strong>قرمز</strong> ہے.</p>
<h2>اس ذیلی سرلیک کا بھی رنگ قرمز ہے.</h2>
<h2>اس ذیلی سرلیک میں مضبوط طور پر زور دیئے گئے لفظ<strong>blue</strong>.</h2>

مربوط محتوا

اگر آپ مشتق انتخاب گر کے بارے میں مزید معلومات حاصل کرنا چاہتے ہیں تو، کدووسی ڈبلیو3 کام ڈبلیو کام ڈبلیو کی اعلی تربیتی سیریز میں درج ذیل مواد کو پڑھیں: