انتخاب‌گرهای برادران مجاور 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 دو لیست دارد: یک لیست unordered و یک لیست ordered، هر کدام از سه عناصر لیست دارند. این دو لیست برادران مجاور هستند و عناصر لیست نیز برادران مجاور هستند. اما عناصر لیست اول با عناصر لیست دوم برادران مجاور نیستند، زیرا این دو گروه از عناصر به یک element پدر مشترک ندارند (بسیار بیشتر شبیه برادران دایی هستند).

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

li + li {font-weight:bold;}

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

آزمایش کنید

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

آنگاه می‌توان از دیگر علامت‌های ترکیبی با علامت برادران مجاور استفاده کرد:

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

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