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

📌 چهار نوع Combinator اصلی در CSS وجود داره:

1️⃣ Descendant Selector (space )

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

div p {
  color: red;
}

🔹 همه‌ی <p> هایی که داخل div باشن، قرمز میشن (چه مستقیم چه غیرمستقیم).

2️⃣ Child Selector (>)

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

div > p {
  color: blue;
}

🔹 فقط <p> هایی که مستقیم داخل div هستن تغییر رنگ میدن، نه اونایی که توی یک تگ دیگه داخل div قرار دارن.

3️⃣ Adjacent Sibling Selector (+)

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

h1 + p {
  color: green;
}

🔹 فقط اولین <p> که مستقیم بعد از h1 میاد سبز میشه.

4️⃣ General Sibling Selector (~)

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

h1 ~ p {
  color: purple;
}

🔹 همه‌ی <p> هایی که بعد از <h1> میان (همسطح اون) بنفش میشن.

📌 مثال ترکیبی

<div>
  <p>اولین پاراگراف</p>
  <span>
    <p>پاراگراف داخل span</p>
  </span>
  <p>دومین پاراگراف</p>
</div>

<h1>عنوان</h1>
<p>پاراگراف بعد از h1</p>
<p>یکی دیگه بعد از h1</p>

div p { color: red; }      /* همه‌ی p های داخل div */
div > p { color: blue; }   /* فقط p های مستقیم داخل div */
h1 + p { color: green; }   /* فقط p بلافاصله بعد از h1 */
h1 ~ p { color: purple; }  /* همه p هایی که بعد از h1 میان */

✨ با این روش می‌تونیم خیلی دقیق روی المنت‌های صفحه کنترل داشته باشیم.