تفاوت `>` و `+` در موقعیت‌یابی عناصر CSS چیست؟

در CSS، انتخابگرها ابزارهای قدرتمندی برای هدف‌گیری عناصر خاص در صفحه هستند. دو انتخابگر پرکاربرد `>` (کامبیناتور فرزند مستقیم) و `+` (کامبیناتور همسایه مجاور) هستند که هر کدام رفتار متفاوتی در انتخاب عناصر دارند. درک تفاوت این دو برای طراحی دقیق طرح‌بندی‌ها ضروری است.

کامبیناتور فرزند مستقیم (`>`)

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

مثال ۱:

div > p {
  color: red;
}

در این مثال فقط پاراگراف‌هایی که مستقیماً داخل تگ `div` قرار گرفته‌اند قرمز می‌شوند. اگر `p` داخل یک `section` باشد که خودش در `div` قرار دارد، این استایل اعمال نمی‌شود.

کامبیناتور همسایه مجاور (`+`)

این انتخابگر عنصری را هدف می‌گیرد که بلافاصله بعد از عنصر اول قرار گرفته باشد و هر دو عنصر والد مشترک داشته باشند. به این معنی که عنصر دوم باید هم‌سطح و مجاور عنصر اول در DOM باشد.

مثال ۲:

h2 + p {
  font-weight: bold;
}

در این کد، فقط پاراگرافی که مستقیماً بعد از تگ `h2` آمده باشد پررنگ می‌شود. اگر عنصر دیگری بین `h2` و `p` وجود داشته باشد، این استایل اعمال نمی‌شود.

مقایسه عملی با مثال

مثال ۳:

<div>
  <section>
    <p>این متن انتخاب نمی‌شود (با `div > p`)</p>
  </section>
  <p>این متن انتخاب می‌شود (با `div > p`)</p>
  <h3>عنوان</h3>
  <p>این متن انتخاب می‌شود (با `h3 + p`)</p>
  <span>عنوان</span>
  <p>این متن انتخاب نمی‌شود (با `h3 + p`)</p>
</div>

خلاصه درس

`>` فقط رابطه والد-فرزند مستقیم را بررسی می‌کند
`+` رابطه خواهر-برادری مجاور را در DOM کنترل می‌کند
هر دو انتخابگر فقط در یک جهت کار می‌کنند (پایین در DOM برای `>` و جلو در ترتیب عناصر برای `+`)
برای انتخاب تمام عناصر همسایه (نه فقط مجاور) می‌توان از `~` استفاده کرد
این انتخابگرها در تمام مرورگرهای مدرن پشتیبانی می‌شوند

با ترکیب مناسب این انتخابگرها می‌توان طرح‌بندی‌های پیچیده را با دقت بالا کنترل کرد. انتخاب بین آنها بستگی به ساختار DOM و نیازهای طراحی دارد.

توسعه دهندگان

نیما جاهد