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

انتخابگر برادران مجاور (Adjacent sibling selector) می‌تواند عنصری را انتخاب کند که درست پس از یک عنصر دیگر قرار دارد و هر دو در یک پدر مشترک قرار دارند.

انتخاب برادران مجاور

برای انتخاب عنصری که درست پس از یک عنصر دیگر قرار دارد و هر دو در یک پدر مشترک قرار دارند، می‌توان از انتخابگر برادران مجاور (Adjacent sibling selector) استفاده کرد.

برای افزایش حاشیه بالایی پاراگرافی که درست پس از علامت h1 ظاهر می‌شود، می‌توان به این صورت نوشت:

h1 + p {margin-top:50px;}

این انتخابگر به این صورت خوانده می‌شود: “انتخاب پاراگرافی که درست پس از علامت h1 ظاهر می‌شود، و h1 و p عناصر مشترک پدر دارند.”

آزمایش کنید

توضیح گرامری

انتخابگر برادران مجاور (Adjacent sibling combinator) با استفاده از علامت «+» استفاده می‌شود.

توضیح:مانند متحدالمحاوره، می‌توان فاصله‌های خالی در کنار متحدالمحاوره‌ها داشت.

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

<div>
  <ul>
    <li>مورد 1</li>
    <li>مورد 2</li>
    <li>مورد 3</li>
  </ul>
  <ol>
    <li>مورد 1</li>
    <li>مورد 2</li>
    <li>مورد 3</li>
  </ol>
</div>

در این بخش، element div دو لیست دارد: یک لیست غیر مرتب و یک لیست مرتب، هر کدام شامل سه عناصر لیست هستند. این دو لیست برادران نزدیک هستند و عناصر لیست نیز برادران نزدیک هستند. اما عناصر لیست اول با عناصر لیست دوم برادران نزدیک نیستند، زیرا این دو گروه از عناصر لیست به یک element پدر مشترک ندارند (بیشترین چیزی که می‌توانند باشند برادران دایی هستند).

لطفاً به خاطر داشته باشید که با یک ادغام تنها می‌توان عناصر برادران نزدیک دوم را انتخاب کرد. به عنوان مثال، به خاطر داشته باشید که در انتخاب‌گر زیر:

li + li {font-weight:bold;}

این انتخاب‌گر تنها لیست‌های دوم و سوم را به سبک فونت تیره درآورد. لیست اول تحت تأثیر قرار نمی‌گیرد.

آزمایش کنید

ادغام با انتخاب‌گرهای دیگر

ادغام برادران نزدیک می‌تواند با دیگر ادغام‌ها ترکیب شود:

html > body table + ul {margin-top:20px;}

این انتخاب‌گر به این صورت توضیح داده می‌شود: تمام عناصر ul که در ادامه عناصر table ظاهر می‌شوند انتخاب می‌شوند، این table در یک element body قرار دارد که خود element body فرزند element html است.