آموزش علامت های ترکیب کننده در CSS

ترکیب کننده ها(Combinators) در CSS

یک ترکیب کننده(combinator) چیزی است که ارتباط بین سلکتورها را مشخص می کند. یک سلکتور کلی در CSS ،می تواند حاوی یک یا چند سلکتور ساده باشد. ما می توانیم بین این سلکتورهای ساده، یک علامت ترکیب کننده(combinator) اضافه کنیم.
در CSS چهار ترکیب کننده ی مختلف وجود دارند که عبارتند از:

1. سلکتور نوادگان(فاصله خالی یا همان space).

2. سلکتور فرزند(<)

3. سلکتور خواهر یا برادر مجاور(+)

4. سلکتور خواهر یا برادر عمومی(~)

بررسی سلکتور نوادگان(فاصله سفید)

سلکتور نوادگان، تمام عناصری را که نواده ی یک عنصر مشخص هستند را مورد تطابق قرار می دهد. (در اینجا نواده یعنی: فرزند، نوه، نتیجه و ...).  در مثال زیر، تمام عناصر <p> که درون عناصر <div> قرار دارند، انتخاب(گزینش) می شوند:

div p {
  background-color: yellow;
}

بررسی سلکتور فرزند(<)

سلکتور فرزند، تمام عناصری که فرزند یک عنصر خاص هستند را مورد تطابق قرار می دهد. در مثال زیر، تمام عناصر <p> که فرزند یک عنصر <div> هستند مورد تطابق قرار می گیرند:

div > p {
  background-color: yellow;
}

بررسی سلکتور خواهر یا برادر مجاور(+)

از سلکتور خواهر یا برادر مجاور، برای انتخاب یک عنصر که بلافاصله پس از یک عنصر خاص دیگر قرار دارد، استفاده می شود. عناصر خواهر یا برادر، باید والد مشابهی داشته باشند، و کلمه ی "مجاور" یعنی بلافاصله پس از یک عنصر دیگر. در مثال زیر، اولین عنصر <p> که بلافاصله پس از عناصر <div> قرار گرفته است، انتخاب می شود:

div + p {
  background-color: yellow;
}

سلکتور خواهر یا برادر عمومی(~)

سلکتور خواهر یا برادر عمومی، تمام عناصری که خواهر یا برادرِ بعدیِ یک عنصرِ خاص هستند را انتخاب می کند. مثال زیر، تمام عناصر <p> که خواهر یا برادر بعدیِ عناصر <div> هستند، را انتخاب می کند:

div ~ p {
  background-color: yellow;
}