انتخابگرهای چندسطحی در CSS برای انتخاب عناصر وابسته در ساختار سلسله‌مراتبی (Hierarchical Structure) صفحه استفاده می‌شوند.

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

۱. انواع انتخابگرهای چندسطحی در CSS

✅ ۱. انتخابگر فرزند مستقیم (>)

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

مثال:

<div class="parent">
    <p>این یک پاراگراف درون div است.</p>
    <span>این یک span درون div است.</span>
    <div>
        <p>این یک پاراگراف تو در تو است.</p>
    </div>
</div>

.parent > p {
    color: red;
}

🔹 نتیجه:

• پاراگرافی که مستقیماً داخل .parent است، قرمز می‌شود.
• پاراگراف داخل div فرعی تغییر رنگ نخواهد داشت.

✅ ۲. انتخابگر نسل‌های پایین‌تر (تمام نوه‌ها) ( – فاصله)

این انتخابگر تمام فرزندان (Children) و نوه‌ها (Descendants) را هدف می‌گیرد، نه فقط فرزند مستقیم.

مثال:

.parent p {
    color: blue;
}

🔹 نتیجه:

• تمام <p>‌ها درون .parent (چه فرزند مستقیم و چه نوه) آبی می‌شوند.

✅ ۳. انتخابگر هم‌سطح مجاور (+)

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

مثال:

<div>یک باکس</div>
<p>اولین پاراگراف بعد از div</p>
<p>دومین پاراگراف بعد از div</p>

div + p {
    color: green;
}

🔹 نتیجه:

• فقط اولین <p> که بعد از <div> آمده سبز می‌شود.

✅ ۴. انتخابگر تمام عناصر هم‌سطح (~)

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

مثال:

div ~ p {
    color: orange;
}

🔹 نتیجه:

• همه‌ی <p>‌هایی که بعد از <div> در همان سطح قرار دارند، نارنجی می‌شوند.

✅ ۵. انتخابگر والد (:has()) – در مرورگرهای مدرن

انتخابگر :has() که در CSS مدرن اضافه شده، امکان انتخاب والد بر اساس وجود یک فرزند خاص را فراهم می‌کند.

مثال:

div:has(p) {
    border: 2px solid red;
}

🔹 نتیجه:

• هر div که داخلش یک <p> وجود داشته باشد، حاشیه قرمز می‌گیرد.

۲. ترکیب انتخابگرهای چندسطحی برای استایل‌دهی پیشرفته

می‌توان چندین انتخابگر را ترکیب کرد تا انتخاب دقیق‌تر و استایل‌دهی بهینه‌تر انجام شود.

مثال ۱: هدف‌گیری دقیق‌تر عناصر

.parent > div p:first-child {
    font-weight: bold;
}

🔹 نتیجه:

• اولین <p> که داخل <div>‌های فرزند مستقیم .parent قرار دارد، بولد می‌شود.

مثال ۲: ترکیب انتخابگرهای هم‌سطح و فرزند مستقیم

.container > section ~ article {
    background-color: lightgray;
}

🔹 نتیجه:

• همه‌ی <article>هایی که هم‌سطح <section> هستند و بعد از آن می‌آیند، پس‌زمینه خاکستری می‌گیرند.

۳. نتیجه‌گیری

✅ انتخابگرهای چندسطحی در CSS به ما کمک می‌کنند که عناصر را بر اساس موقعیتشان در ساختار HTML به‌طور دقیق هدف بگیریم.
✅ > فقط فرزندان مستقیم را انتخاب می‌کند، در حالی که فاصله تمام نوه‌ها را در بر می‌گیرد.
✅ + فقط اولین هم‌سطح بعدی و ~ تمام هم‌سطح‌های بعدی را انتخاب می‌کند.
✅ انتخابگر :has() امکان انتخاب والد بر اساس فرزندان را در مرورگرهای مدرن فراهم کرده است.

با درک این انتخابگرها، می‌توان ساختارهای پیچیده را در CSS مدیریت کرده و از تکرار کدهای غیرضروری جلوگیری کرد.