آموزش انتخاب عناصر فرزند در CSS

گاهی اوقات می خواهیم خود را محدود کنیم و یک عنصر که فرزند یک عنصر دیگر است را انتخاب یا گزینش کنیم. بعنوان مثال، ممکن است بخواهیم یک عنصر strong که تنها فرزند یک عنصر h1 است را (بر خلاف هر سطحی از نواده یا نسل) انتخاب کنیم. برای انجام این کار، می توانیم از علامت بزرگتری(>) استفاده کنیم:

h1 > strong {color: red;}

این کد سی اس اس عنصر strong نشان داده شده در ابتدای h1 را در کدهای html زیر به رنگ قرمز در می آورد اما عنصر دوم را در خط بعدی انتخاب نمی کند:

<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

اگر کد html بالا را از راست به چپ بخوانید، دستور h1 > strong یعنی: هر عنصر strong که فرزند مستقیم(نه تو در توی) یک عنصر h1 است را انتخاب کن. ما می توانیم به طور اختیاری، در اطراف این سلکتور یک فاصله سفید قرار دهیم. بنابراین دستورات h1 > strong و h1> strong و h1>strong همه یکسان هستند. ما می توانیم به صورت دلخواه این فاصله های سفید را اضافه یا حذف کنیم. وقتی که ما به این سند بعنوان یک ساختار درختی نگاه کنیم، به آسانی می توانیم ببینیم که یک سلکتور فرزند، به عناصری تطابق می یابد که مستقیماً و بدون واسطه به سرِ درخت متصل شده اند. تصویر 2.19 بخشی از یک درخت سند را نشان می دهد:

 (تصویر 2.19: یک قطعه از درخت سند)

 در این درخت، می توانیم رابطه های والد و فرزندی را مشاهده کنیم. بعنوان مثال، عنصر a ،والد عنصر strong است اما خودش فرزند عنصر p است. ما می توانیم در این درخت با استفاده از سلکتورهای p > a و a > strong عناصر را مورد تطابق قرار دهیم اما نمی توانیم از سلکتور p > strong استفاده کنیم، زیرا عنصر strong نواده ی عنصر p است نه فرزند (مستقیم) آن. ما همچنین می توانیم ترکیب کننده ی فرزند و نواده را در همین سلکتور ترکیب کنیم.

بنابراین سلکتور table.summary td > p هر عنصر p که یک فرزند از عنصر td است؛ که این td نواده ی یک عنصر table است، که یک کلاس به نام summary دارد، گزینش می شود. یعنی یه جدول(table) داریم که از کلاس summary. استفاده می کنه و درش عناصر p رو انتخاب می کنیم که فرزند عناصر td هستند.