ترکیب گرها در CSS (Combinators)
در این راهنما، «ترکیب گرها (Combinators)» را معرفی می کنیم. ترکیب گر رابطه بین دو یا چند انتخاب گر را تعریف می کند و به شما اجازه می دهد انتخاب دقیق تری داشته باشید.
انواع ترکیب گرها در CSS
چهار نوع ترکیب گر داریم؛ هرکدام نوع متفاوتی از رابطه را هدف می گیرند:
- نسلی (Descendant) — فاصله خالی
- فرزند (Child) — >
- خواهر/برادر بعدی (Next sibling) — +
- خواهر/برادرهای بعدی (Subsequent-sibling) — ~
ترکیب گر نسلی (Descendant)
تمام عناصری را انتخاب می کند که نسلِ یک عنصر مشخص هستند؛ مانند فرزند و نوه.
div p { background-color: yellow; }ترکیب گر فرزند (Child)
فقط فرزندان مستقیمِ عنصر والد را هدف می گیرد؛ نوه ها شامل نمی شوند.
div > p { background-color: yellow; }ترکیب گر خواهر/برادر بعدی (Next sibling)
عنصری را که بلافاصله بعد از عنصر مشخص و با همان والد می آید، انتخاب می کند.
div + p { background-color: yellow; }ترکیب گر خواهر/برادرهای بعدی (Subsequent-sibling)
تمام خواهر/برادرهای بعدیِ هم والد را انتخاب می کند؛ نه فقط مورد بلافاصله بعدی.
div ~ p { background-color: yellow; }نکته: برای مرور مفاهیم مکمل، به صفحات تراز کردن (Align) و کلاس های شبه (Pseudo-classes) سر بزنید. همچنین این صفحه ترکیب گرها را نشانه گذاری کنید.