انتخاب‌گرهای نسل CSS

نژاد پسند گزینش‌گر (descendant selector) بھی کہلاتا ہے، یعنی شامل گزینش‌گر ہے。

مشتق‌ساز انتخاب‌کننده می‌تواند عناصری را که به عنوان پس‌زمینه یک عنصر خاص هستند، انتخاب کند.

انتخاب عناصر بر اساس بافت

می‌توانیم مشتق‌ساز انتخاب‌کننده را برای ایجاد قوانینی تعریف کنیم که در برخی ساختارهای مستند عمل می‌کنند، اما در ساختارهای دیگر عمل نمی‌کنند.

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

h1 em {color:red;}

این قوانین، متن em بعد از عنصر h1 را به قرمز تبدیل می‌کند. متن em دیگر (مانند متن در پاراگراف یا نقل قول‌های بلند) توسط این قوانین انتخاب نمی‌شود:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

آزمایش کنید

البته، می‌توانید برای هر em موجود در h1 یک ویژگی class قرار دهید، اما به وضوح، مشتق‌ساز انتخاب‌کننده کارایی بیشتری دارد.

توضیح گرامری

در مشتق‌ساز انتخاب‌کننده، سمت چپ قوانین شامل دو یا چند انتخاب‌کننده با فاصله‌های جدا شده از یکدیگر است. فاصله‌ها یک علامت ترکیبی هستند. هر علامت ترکیبی می‌تواند به عنوان "... در ... پیدا می‌شود"، "... به عنوان بخشی از ..." یا "... به عنوان پس‌زمینه ..." تفسیر شود، اما باید از راست به چپ انتخاب‌کننده را بخوانید.

بنابراین، انتخاب‌کننده h1 em می‌تواند به عنوان هر em بعد از عنصر h1 تفسیر شود. اگر بخواهید انتخاب‌کننده را از چپ به راست بخوانید، می‌توانید به جای آن به شرح زیر بگویید: "همه h1‌هایی که em شامل آن‌ها هستند، باید این استایل را به em اعمال کنند".

کاربرد‌های خاص

عملکرد مشتق‌ساز انتخاب‌کننده بسیار قوی است. با آن، می‌توان وظایفی که در HTML غیرممکن بودند را ممکن کرد.

فرض کنید یک مستند وجود دارد که در آن یک سایدبار و یک بخش اصلی وجود دارد. پس‌زمینه سایدبار آبی و پس‌زمینه بخش اصلی سفید است، هر دو این مناطق شامل لیست‌های لینک هستند. نمی‌توان همه لینک‌ها را آبی کرد زیرا در این صورت لینک‌های آبی سایدبار دیده نمی‌شوند.

حل کا استعمال مشتق‌ساز انتخاب‌کننده می‌باشد. در این حالت، می‌توان برای div شامل سایدبار، ویژگی class با مقدار sidebar تعیین کرد و مقدار ویژگی class بخش اصلی را به maincontent تنظیم کرد. سپس به شرح زیر باید نویسید:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

یک جنبه مهم در انتخاب‌گرهای نسل که ممکن است فراموش شود، این است که فاصله لایه‌ها بین دو عنصر می‌تواند بی‌نهایت باشد.

مثلاً اگر ul em نوشته شود، این نحوه نوشتن انتخاب‌گر تمام عناصر em را که از عناصر ul ارث می‌برند را انتخاب می‌کند، بدون توجه به اینکه em چقدر عمیق‌تر است.

بنابراین، ul em تمام عناصر em در زیر این علامت‌ها را انتخاب خواهد کرد:

<ul>
  <li>نقش 1 لیست</li>
    <ol>
      <li>نقش 1-1 لیست</li>
      <li>نقش 1-2 لیست</li>
      <li>نقش 1-3 لیست</li>
        <ol>
          <li>نقش 1-3-1 لیست</li>
          <li>نقش لیست</li> <em>1-3-2</em></li>
          <li>نقش 1-3-3 لیست</li>
        </ol>
      </li>
      <li>نقش 1-4 لیست</li>
    </ol>
  </li>
  <li>نقش 2 لیست</li>
  <li>نقش 3 لیست</li>
</ul>

آزمایش کنید