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

بچولیار چوسیروں (Child selectors) کے مقابلے میں، بچولیار چوسیروں (Child selectors) صرف کسی عناصر کے بچولیار عناصر کو منتخب کرسکتے ہیں。

بچولیار منتخب کریں

آپ اگر کسی دیگر بچولیار عناصر کو منتخب نہیں چاہتے، بلکہ محدوودیت کو کم کرنا چاہتے ہیں، تو بچولیار چوسیر (Child selector) استعمال کریں。

مثال میں، اگر آپ چاہتے ہیں کہ صرف h1 عناصر کے ذریعہ strong عناصر کو منتخب کیا جائے، تو اس طرح لکھ سکتے ہیں:

h1 > strong {رنگ: لال;}

یہ رول پہلے h1 کے نیچے کے دو strong عناصر کو لال بنائے گا، لیکن دوسرے h1 میں strong متاثر نہیں ہوگا:

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

آزمایش کنید

توضیح گرامری

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

می‌توان بین ابرکارات کنار هم خالی گذاشت، این اجباری نیست. بنابراین، هر یک از روش‌های زیر بی‌نقص است:

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

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

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

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

table.company td > p

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