CSS Combinators Reference

🧩 مرجع ترکیب‌کننده‌های CSS

در CSS، ترکیب‌کننده (Combinator) رابطه‌ی بین دو انتخاب‌گر (Selector) را مشخص می‌کند.
چهار نوع اصلی ترکیب‌کننده وجود دارد:

ترکیب‌کننده	نام انگلیسی	نمونه نحو (Syntax)	توضیح / رابطه
(فاصله)	Descendant combinator (فرزند تودرتو)	`div p`	تمام تگ‌های `<p>` که درون `<div>` هستند (در هر سطحی) را انتخاب می‌کند.
`>`	Child combinator (فرزند مستقیم)	`div > p`	تمام تگ‌های `<p>` که فرزند مستقیم `<div>` هستند را انتخاب می‌کند.
`+`	Adjacent sibling combinator (خواهر/برادر مجاور)	`div + p`	اولین `<p>` که بلافاصله بعد از `<div>` قرار دارد را انتخاب می‌کند.
`~`	General sibling combinator (خواهر/برادر عمومی)	`div ~ p`	تمام `<p>`هایی که بعد از `<div>` در همان سطح (خواهر/برادر) قرار دارند را انتخاب می‌کند.

article p {
color: blue;
}

✅ تمام تگ‌های <p> که درون یک <article> هستند (حتی اگر چند سطح تو در تو باشند) انتخاب می‌شوند.

<article>
<section>
<p>متن آبی (فرزند تودرتو)</p>
</section>
</article>

article > p {
color: green;
}

✅ فقط <p>هایی که فرزند مستقیم <article> هستند انتخاب می‌شوند.

<article>
<p>متن سبز (فرزند مستقیم)</p>
<section>
<p>این یکی سبز نیست (نوه است)</p>
</section>
</article>

h2 + p {
color: red;
}

✅ اولین <p> که بلافاصله بعد از یک <h2> قرار دارد انتخاب می‌شود.

<h2>عنوان</h2>
<p>پاراگراف قرمز</p>
<p>این یکی قرمز نیست</p>

می‌توان چند ترکیب‌کننده را با هم استفاده کرد:

section > div p {
color: purple;
}

➡️ این قانون، تگ‌های <p> را که درون <div> هستند و آن <div> فرزند مستقیم <section> است، انتخاب می‌کند.

انتخاب‌گر	نمونه	انتخاب می‌کند
`A B`	`div p`	همه‌ی `<p>`‌های داخل `<div>`
`A > B`	`div > p`	`<p>`‌های فرزند مستقیم `<div>`
`A + B`	`div + p`	اولین `<p>` بعد از `<div>`
`A ~ B`	`div ~ p`	همه‌ی `<p>`‌های بعد از `<div>` در همان سطح