تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

سلکتور ترکیب کننده یا Combinator selector در CSS
سی‌اس‌اس 

سلکتور ترکیب کننده در CSS

به روز شده در امیرحسین شهسواری 0 دیدگاه ،،،،

سلکتور ترکیب کننده (یا 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 روی یک سند HTML با پنج پاراگراف

بازگشت به فهرست مجموعه آموزشی CSS

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *