سلکتور ترکیب کننده (یا Combinator Selector) گونهای از سلکتورها در CSS است که از ترکیب سایر سلکتورها به وجود میآید. به عبارت بهتر در سلکتورهای ترکیب کننده، چند سلکتور ساده با یکدیگر ترکیب میشوند و یک سلکتور جدید را شکل میدهند. این سلکتورها به شما اجازه میدهند المان ها را براساس روابطشان با سایر المانها (مانند فرزندی، هموالدی و …) انتخاب کنید.
بیشتر بخوانید: آشنایی با سلکتورها و انواع آنها در CSS
نحوه استفاده از سلکتور های ترکیب کننده در CSS
مابین سلکتورهای ساده در یک سلکتور ترکیب کننده، کاراکتر یا نمادی موسوم به ترکیب کننده (Combinator) قرار میگیرد. این کاراکتر نوع ارتباط موردنظر میان سلکتورها را مشخص میکند.
به عنوان مثالی از این نوع سلکتورها میتوان به سلکتور نسل (Descendant selector) اشاره کرد. این سلکتورها، تمام المان هایی که منطبق با سلکتور دوم هستند را در صورتی انتخاب میکنند که از نسل المانی منطبق با سلکتور اول باشند. در سلکتورهای نسل از یک کاراکتر فاصله برای ترکیب دو سلکتور استفاده میشود. برای درک بهتر عملکرد این سلکتورها، سلکتور div p را در مثال زیر در نظر بگیرید.
div p {
color: red;
}سلکتور فوق تمام المان های <p> که از نسل یک المان <div> هستند را انتخاب میکند. در واقع با کمک قانون فوق، متن تمام المان های <p> که داخل یک المان <div> قرار دارند قرمز میشود. فرقی هم ندارد المان <div> والد المان <p> باشد یا والد والد آن یا والد والد والد آن و الی آخر.
فرض کنید بخش <body> در سند HTML، مشابه با کد زیر شامل پنج پاراگراف، یک المان <div> و یک المان <section> باشد:
<body>
<p>Paragraph 1. Not in a div. But before a div.</p>
<div>
<p>Paragraph 2 in the div. A direct child of the div.</p>
<section><p>Paragraph 3 in the div. Not direct child of a div.</p></section>
</div>
<p>Paragraph 4. Not in a div. But adjacent sibling after a div.</p>
<p>Paragraph 5. Not in a div. But sibling after a div.</p>
</body>با توجه به المان ها و قانون CSS فوق، تنها پاراگراف های دوم و سوم با رنگ قرمز مشخص میشوند. چرا که صرفا این دو پاراگراف داخل یک المان <div> قرار دارند.
انواع سلکتورهای ترکیبکننده
در سیاساس، چهار نوع سلکتور ترکیب کننده وجود دارد:
- سلکتور نسل (Descendant selector): در سلکتور نسل، تمام المانهایی که منطبق با سلکتور دوم هستند در صورتی انتخاب میشوند که از نسل المانی منطبق با سلکتور اول باشند. در این نوع سلکتور، سلکتور اول و دوم با کمک یک کاراکتر فاصله با یکدیگر ترکیب میشوند.
- سلکتور فرزند (Child selector): در سلکتور فرزند، صرفا المانهایی منطبق با سلکتور دوم انتخاب میشوند که فرزند مستقیم المانی منطبق با سلکتور اول باشند. در این نوع سلکتور، سلکتور اول و دوم با کمک یک کاراکتر > با یکدیگر ترکیب میشوند.
- سلکتور هموالد مجاور یکدیگر (Adjacent Sibling selector): در سلکتور هموالد مجاور یا سلکتور برادر مجاور، صرفا المانهایی منطبق با سلکتور دوم انتخاب میشوند که برادر بلافصل بعدی یک المان منطبق با سلکتور اول باشند. در این نوع سلکتور، سلکتور اول و دوم با کمک یک کاراکتر + با یکدیگر ترکیب میشوند.
- سلکتور هموالد عمومی (General Sibling selector): در سلکتور هموالد عمومی یا سلکتور برادر عمومی، المانهایی منطبق با سلکتور دوم انتخاب میشوند که برادر بعدی المانی منطبق با سلکتور اول باشند. در این نوع سلکتور، سلکتور اول و دوم با کمک یک کاراکتر ~ با یکدیگر ترکیب می شوند و برخلاف سلکتور هموالد مجاور لازم نیست المانهای مورد بحث کنار یکدیگر باشند.
در تصویر زیر نتیجه قوانین با سلکتورهای div p, div > p، div + p و div ~ p روی قطعه کد HTML مثال قبل را مشاهده میکنید. (جزئیات بیشتر در مورد سلکتورهای فوق را در قسمتهای مجزا خواهید آموخت).
بازگشت به فهرست مجموعه آموزشی CSS
