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

این عملگرها به ما کمک می‌کنند که انتخابگرهای دقیق‌تر و انعطاف‌پذیرتری برای استایل‌دهی بهتر ایجاد کنیم.

۱. دسته‌بندی عملگرهای انتخابگر در CSS

عملگرهای انتخابگر را می‌توان به دو دسته کلی تقسیم کرد:

1. عملگرهای وابسته به ساختار (Structural Operators) – انتخاب عناصر بر اساس موقعیت و رابطه آن‌ها در HTML.
2. عملگرهای ویژگی (Attribute Operators) – انتخاب عناصر بر اساس وجود یا مقدار ویژگی‌های HTML.

۲. عملگرهای وابسته به ساختار در CSS

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

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

مثال: انتخاب فقط <p>هایی که فرزند مستقیم .container هستند.

.container > p {
    color: red;
}

کد HTML مربوطه:

<div class="container">
    <p>این پاراگراف قرمز خواهد شد.</p>
    <div>
        <p>این پاراگراف تغییری نخواهد کرد.</p>
    </div>
</div>

🔹 نتیجه: فقط فرزندان مستقیم .container قرمز می‌شوند، اما پاراگراف داخل <div> فرعی تحت تأثیر قرار نمی‌گیرد.

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

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

مثال:

.container p {
    color: blue;
}

🔹 نتیجه: تمام <p>ها درون .container (چه فرزند مستقیم و چه نوه) آبی خواهند شد.

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

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

مثال: تغییر رنگ اولین <p> که مستقیماً بعد از <h2> قرار دارد.

h2 + p {
    font-weight: bold;
}

کد HTML:

<h2>عنوان</h2>
<p>این پاراگراف بولد خواهد شد.</p>
<p>این پاراگراف تغییر نمی‌کند.</p>

🔹 نتیجه: فقط پاراگراف اول که بلافاصله بعد از <h2> آمده، تغییر می‌کند.

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

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

مثال:

h2 ~ p {
    color: green;
}

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

۳. عملگرهای ویژگی در CSS

عملگرهای ویژگی به ما کمک می‌کنند عناصر HTML را بر اساس مقدار ویژگی‌های آن‌ها انتخاب کنیم.

✅ ۱. انتخاب عناصر دارای یک ویژگی خاص ([attribute])

تمام inputهایی که دارای ویژگی type هستند را انتخاب می‌کند.

input[type] {
    border: 2px solid blue;
}

🔹 نتیجه: استایل روی تمام فیلدهای ورودی اعمال می‌شود، صرف نظر از مقدار type.

✅ ۲. انتخاب عناصری که مقدار ویژگی آن‌ها دقیقاً برابر مقدار خاصی است (=)

input[type="password"] {
    background-color: yellow;
}

🔹 نتیجه: فقط فیلدهای ورودی پسورد زرد می‌شوند.

✅ ۳. انتخاب عناصری که مقدار ویژگی آن‌ها با مقدار خاصی شروع می‌شود (^=)

a[href^="https"] {
    color: green;
    font-weight: bold;
}

🔹 نتیجه: لینک‌هایی که با https شروع می‌شوند (لینک‌های امن)، سبز و پررنگ می‌شوند.

✅ ۴. انتخاب عناصری که مقدار ویژگی آن‌ها با مقدار خاصی پایان می‌یابد ($=)

a[href$=".pdf"] {
    color: red;
    font-weight: bold;
}

🔹 نتیجه: لینک‌های دانلود فایل PDF قرمز می‌شوند تا کاربران متوجه شوند که روی فایل PDF کلیک می‌کنند.

✅ ۵. انتخاب عناصری که مقدار ویژگی آن‌ها شامل یک مقدار خاص است (*=)

a[href*="example"] {
    background-color: yellow;
}

🔹 نتیجه: تمام لینک‌هایی که در آدرسشان example دارند، پس‌زمینه زرد می‌گیرند.

✅ ۶. انتخاب عناصری که مقدار ویژگی آن‌ها دقیقاً برابر مقدار مشخص یا شامل آن باشد (~=)

div[class~="highlight"] {
    border: 3px solid orange;
}

🔹 نتیجه: فقط divهایی که کلاس highlight دارند، دارای حاشیه نارنجی خواهند شد.

✅ ۷. انتخاب عناصری که مقدار ویژگی آن‌ها با مقدار مشخصی شروع شده اما دقیقاً با آن برابر نیست (|=)

p[lang|="en"] {
    font-style: italic;
}

🔹 نتیجه: پاراگراف‌هایی که lang="en" یا lang="en-US" دارند، ایتالیک می‌شوند.

۴. ترکیب عملگرهای انتخابگر برای استایل‌دهی پیشرفته

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

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

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

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

✅ انتخابگرهای ساختاری مانند >، + و ~ به ما امکان می‌دهند عناصر را بر اساس موقعیتشان در HTML انتخاب کنیم.
✅ انتخابگرهای ویژگی مانند [attribute="value"] به ما کمک می‌کنند عناصر را بر اساس مقدار ویژگی‌هایشان هدف قرار دهیم.
✅ ترکیب این انتخابگرها به ما امکان استایل‌دهی دقیق و بهینه در پروژه‌های CSS را می‌دهد.