CSS Combinators

Combinators در CSS چیست؟

Combinators به شما اجازه می‌دهند که روابط بین عناصر HTML رو در انتخابگرهای CSS مشخص کنید. یعنی می‌تونید بگید «این استایلی فقط به فلان عنصر اعمال بشه که در کنار یا داخل عنصر دیگه‌ای باشه».

—

 انواع Combinators

 1. Descendant Combinator (فضای خالی)

* انتخاب تمام عناصر فرزند (یا فرزند فرزند و …) یک عنصر مشخص.

“`css
div p {
color: red;
}
“`

اینجا همه `<p>` هایی که در داخل `<div>` هستند (هر سطحی) قرمز می‌شن.

—

2. Child Combinator (`>`)

* انتخاب فقط فرزندان مستقیم یک عنصر.

“`css
ul > li {
color: blue;
}
“`

اینجا فقط `<li>` های مستقیم داخل `<ul>` رنگ‌شون آبی می‌شه.

—

 3. Adjacent Sibling Combinator (`+`)

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

“`css
h1 + p {
margin-top: 0;
}
“`

اینجا فقط پاراگرافی که مستقیم بعد از `<h1>` آمده بدون فاصله انتخاب می‌شه.

—

 4. General Sibling Combinator (`~`)

* انتخاب تمام عناصری که بعد از یک عنصر مشخص آمده‌اند و در همان سطح هستند (نه لزوماً بلافاصله بعدی).

“`css
h2 ~ p {
color: green;
}
“`

اینجا همه `<p>` هایی که بعد از `<h2>` در همان والد آمده‌اند رنگ سبز می‌شوند.

—

 جمع‌بندی

| Combinator                   | نشانه                        | توضیح                              | مثال |
| —————-                | ——-                        | ———————              | ——— |
| Descendant |                        (space)                | همه فرزندان در هر سطح     | `div p` |
| Child                           | `>`                           | فقط فرزند مستقیم             | `ul > li` |
| Adjacent Sibling           | `+`                           | اولین برادر بعدی                 | `h1 + p` |
| General Sibling             | `~`                           |  همه برادران بعدی             |  `h2 ~ p` |

—