Combinator نمادی است که رابطه بین سلکتورها را توصیف می کند. Combinator در زبان انگلیسی به معنای ترکیب کننده می باشد، دلیل نام گذاری این سلکتورها به Combinator این می باشد که آن ها سلکتورها را باهم ترکیب می کنند و باعث ایجاد یک رابطه ی مناسب با یکدیگر و مکان محتوا در متن می شوند.
یکی از مواردی که معمولا در هنگام طراحی در CSS باید از آن استفاده کنید، تحلیل ارتباط بین عناصر HTML و چگونگی دسترسی به عناصر تودرتو است. Combinator ها در واقع ارتباط بین انتخابگرهای عناصر HTML در CSS را نشان می دهد. با استفاده از Combinator ها شما می توانید به عناصر فرزند در CSS دسترسی پیدا کرده و برای آن ها Style تعریف کنید.
یک سلکتور می تواند شامل بیشتر از یک سلکتور ساده باشد. بین سلکتورهای ساده ما می توانیم یک combinator اضافه کنیم.
در CSS چهارنوع combinator وجود دارد:
- descendant selector (space) (فاصله)
- child selector (>) (عنصر فرزند)
- adjacent sibling selector (+) (عنصر مجاور)
- general sibling selector (~) (عناصر یک سطح)
سلکتور Descendant (سلکتورهایی که بینشان فاصله وجود دارد)
سلکتور descendant تمام عناصر فرزند یک عنصر خاص را انتخاب می کند. مثال زیر تمام عناصر <p> را در عنصرهای <div> انتخاب می کند:
خروجی مثال بالا به شکل زیر است:
سلکتور Child
سلکتور child تمام فرزندان مستقیم یک عنصر خاص را انتخاب می کند. مثال زیر تمام عناصر p که فرزند مستقیم عنصر div هستند را انتخاب می کند:
خروجی مثال بالا به شکل زیر است:
سلکتور Adjacent Sibling (همزاد مجاور)
سلکتور adjacent sibling تمام عناصری که همسایه های همزاد یک عنصر خاص هستند را انتخاب می کند. عناصر همزاد باید عنصر والد یکسان داشته باشند. مثال زیر تمام عناصر p را که بلافاصله بعد از عنصرهای div قرار گرفتند را مشخص می کند:
خروجی مثال بالا به شکل زیر است:
سلکتور General sibling
سلکتور General sibling (عناصر فرزند همزاد) تمام عناصر هم سطح عنصر مشخص شده را انتخاب می کند. و کافیست که این عناصر، یک والد داشته باشند و اهمیتی ندارد که دقیقا پشت سر هم باشند. سلکتور general sibling تمام عناصر که همزاد یک عنصر به خصوص می باشند را انتخاب می کند. مثال زیر تمام عناصر p که همزاد div هستند را انتخاب می کند:
خروجی مثال بالا به شکل زیر است:
