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

انتخاب‌کننده‌ی نسل (descendant selector) نیز به عنوان انتخاب‌کننده‌ی شامل (inclusive selector) شناخته می‌شود.

انتخاب‌کننده فرزند می‌تواند عناصری را انتخاب کند که به عنوان فرزند یک عنصر خاص هستند.

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

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

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

h1 em {color:red;}

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

<h1>این یک <em>مهم</em> عنوان است</h1>
<p>این یک پاراگراف <em>مهم</em> است.</p>

آزمایش کنید

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

توضیح گرامری

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

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

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

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

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

راه‌حل استفاده از انتخاب‌کننده فرزند است. در این حالت، می‌توانید برای div‌هایی که حاوی نوار کناری هستند، attribute class با مقدار sidebar تعیین کنید و attribute 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>

آزمایش کنید