انتخاب‌گرهای فرزند CSS

در مقایسه با انتخاب‌کننده فرزند (Descendant selectors)، انتخاب‌کننده فرزند (Child selectors) فقط عناصر را انتخاب می‌کند که به عنوان فرزند یک عنصر خاص هستند.

انتخاب فرزند

اگر نمی‌خواهید عناصر فرزند هر عنصر را انتخاب کنید، بلکه می‌خواهید دایره انتخاب را کوچکتر کنید و فقط فرزندان خاصی را انتخاب کنید، از انتخاب‌کننده فرزند (Child selector) استفاده کنید.

مثلاً، اگر می‌خواهید فقط عناصر <strong>strong</strong> که به عنوان فرزند عناصر <h1> انتخاب می‌شوند را انتخاب کنید، می‌توانید به این صورت بنویسید:

h1 > strong {color:red;}

این قانون اولین دو عناصر <strong>strong</strong> زیر <h1> را قرمز می‌کند، اما عناصر <strong>strong</strong> دومین <h1> تأثیری نمی‌پذیرد:

<h1>این بسیار <strong>خیلی</strong> <strong>خیلی</strong> مهم است.</h1>
<h1>این واقعاً <em>خیلی</em> مهم است.</h1>

آزمایش کنید

توضیحات گرامری

شما باید توجه کرده باشید که وصل‌کننده فرزند از کاراکتر بزرگتر از (>) استفاده می‌کند.

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

h1 > strong
h1> strong
h1 >strong
h1>strong

اگر از راست به چپ بخوانید، انتخاب‌گر h1 > strong می‌تواند به این صورت تفسیر شود: ‘عناصر strong که به عنوان فرزند عناصر h1 هستند انتخاب شوند’.

ادغام انتخاب‌گرهای نسل و فرزند

لطفاً به این انتخاب‌گر زیر نگاه کنید:

table.company td > p

انتخاب‌گرهای بالا همه عناصر p را انتخاب می‌کند که به عنوان فرزند عناصر td هستند، این عنصر td خودش از عنصر table ارث می‌برد که دارای ویژگی class با محتوای company است.