بعنوان یک مثال، فرض کنید تنها می خواهیم عناصر em را انتخاب کنیم که در داخل یک عنصر h1 قرار دارند. می توانیم یک خصوصیت class را به هر عنصر em که در داخل یک عنصر h1 قرار دارد اضافه کنیم اما این کار وقت گیر است. اما بهتر است که از قواعدی استفاده کنیم که تنها عناصر em که در داخل عناصر h1 قرار دارند را انتخاب می کند. برای انجام این کار، به صورت زیر عمل می کنیم:

h1 em {color: gray;}

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

h1 em{
color: gray;
} 

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

ul ol ul em {color: gray;}

در کد بالا، که در مثال 2.17 نشان داده شده است است یک متن، که به ترتیب در داخل عناصر em و ul و ol و ul قرار دارد، انتخاب می شود.

ul ol ul em{
color: gray;
}

همان طور که در مثال بالا مشاهده می کنید، هر متنی که در داخل عنصر <em> باشد و آن در داخل یک لیست نامنظم(ul) باشد، و آن نیز در داخل یک لیست منظم(ol) باشد و آن نیز در داخل یک لیست نامنظم(ul) باشد، به رنگ خاکستری نشان داده می شود.

سلکتورهای نواده می توانند فوق العاده قدرتمند باشند. آنها می توانند کارهایی انجام دهند که هرگز در HTML انجام نمی شود(حداقل بدون تعداد زیادی تگ فونت). اجازه دهید یک مثال عادی بزنیم. فرض کنید یک سند داریم که یک نوار(sidebar) در کنار آن قرار دارد و یک ناحیه ی اصلی نیز دارد. رنگ پس زمینه نوار آبی است و رنگ پس زمینه ی ناحیه اصلی سفید است و در هر دو ناحیه لیستی از چند لینک وجود دارد. ما نمی توانیم تمام لینک ها را به رنگ آبی در بیاوریم زیرا در این صورت نمی توانیم لینک های نوار کناری را مشاهده کنیم.

راه حل این است که از سلکتورهای نواده استفاده کنیم. در این مورد، به عنصری که حاوی نوار کناری است یک کلاس می دهیم و ناحیه اصلی را در داخل یک عنصر main قرار می دهیم. سپس استایل های خود را به صورت زیر می نویسیم:

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

(تصویر 2.18 : نتیجه را نشان می دهد)

نکته: دستور link: به لینک هایی اشاره می کند که مورد بازدید قرار نگرفته اند. در بخش لینک ها و شبه کلاس ها در صفحه 77 به آنها اشاره خواهیم کرد.

در اینجا یک مثال دیگر نیز از سلکتورهای نواده وجود دارد: فرض کنید می خواهیم رنگ عنصر b را خاکستری(gray) کنیم؛  که در داخل یک عنصر blockquote قرار دارد و و همچنین می خواهیم برای هر متن bold شده (عنصر b) که در پاراگراف های نرمال پیدا می شود، رنگ خاکستری تنظیم کنیم:

blockquote b, p b {color: gray;}

نتیجه این است که متن داخل عناصر b در پاراگراف ها یا blockquote ها خاکستری می شود.

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

<ul>
  <li>آیتم لیست 1
  <ol>
    <li>آیتم لیست 1.1</li>
    <li>آیتم لیست 1.2</li>
    <li>آیتم لیست 1.3
      <ol>
        <li>آیتم لیست 1.3.1</li>
        <li>آیتم لیست <em>1-3-2</em></li>
        <li>آیتم لیست 1.3.3</li>
      </ol>
    </li>
    <li>آیتم لیست 1.4</li>
  </ol>
 </li>
</ul>

یک جنبه ی نامحسوس دیگر از سلکتورهای نواده این است که آنها مفهومی به نام نزدیکی عناصر ندارند. به عبارت دیگر، نزدیکی دو عنصر در داخل درخت سند هیچ تأثیری بر اعمال یا عدم اعمال یک دستور CSS ندارد. این موضوع زمانی مهم است که دستوراتی را در نظر می گیریم که ممکن است یکدیگر را خنثی کنند. بعنوان مثال، کد زیر را در نظر بگیرید(که حاوی یک نوع سلکتور است و بعداً در صفحه 89 آن را توضیح می دهیم):

div:not(.help) span {color: gray;}
div.help span {color: red;}

<div class="help">
  <div class="aside">
    This text contains <span>a span element</span> within.
  </div>
</div>

دستور اول از قطعه کد CSS در بالا می گوید: هر عنصر span که در درون یک div قرار دارد به طوری که این عنصر div یک کلاس دارد که حاوی کلمه help نیست باید به رنگ خاکستری(gray) نشان داده شود. و دستور دوم می گوید: هر عنصر span که در درون یک div قرار دارد، به طوری که کلاس آن حاوی کلمه help است را به رنگ قرمز نشان داده شود. در کد html بالا، هردوی این دستورات به عنصر span اعمال می شوند و صدق می کنند.

به دلیل اینکه هردو دستور وزن برابری دارند و دستور رنگ قرمز در آخر آورده شده است، در اولویت قرار می گیرد و متن عنصر span به رنگ قرمز درمی آید. این حقیقت که، div class="aside" به عنصر span نسبت به div class="help" نزدیک تر است، نامرتبط است. دوباره می گوییم: نزدیکی عناصر در سلکتورهای نواده تاثیری بر اعمال دستورات CSS ندارد.

هر دو دستور مذکور، اعمال می شوند و تنها یک رنگ می تواند اعمال شود، و به دلیل نحوه کار CSS رنگ قرمز در اولویت قرار می گیرد. (در فصل بعد، در مورد این موضوع صحبت خواهیم کرد).

• بعدی
• قبلی