ترکیب کننده ها در CSS

ترکیب کننده ها در CSS

یک ترکیب کننده و یا combinator چیزی است که رابطه ی بین selector ها را مشخص میکند.

یک selector در CSS میتواند شامل بیش از یک selector ساده باشد. بین selector های ساده ، ما میتوانیم از ترکیب کننده ها استفاده کنیم.

چهار نوع ترکیب کننده در CSS3 عبارت اند از :

• selector نواده (فضای خالی)
• selector فرزند (<)
• selector هم نیای مجاور (+)
• selector هم نیای عمومی (~)

selector نواده 

selector نواده تمام عناصری را انتخاب میکند که از نسل و فرزند یک عنصر مشخص باشند.

در نمونه مثال زیر selector مشخص شده تمام عناصر <p> داخل عناصر <div> در صفحه را با رنگ پس زمینه ی زرد فرمت بندی میکند :

div p {
    background-color: yellow;
}

selector فرزند 

selector فرزند تمام عناصری را انتخاب میکند که فرزند بلافاصله و مستقیم یک عنصر مشخص باشند.

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

div > p {
    background-color: yellow;
}

selector هم نیای مجاور

selector هم نیای مجاور تمام عناصری را انتخاب میکند که اولا با عنصر مشخص شده هم نیا (برادر و دارای یک پدر) باشند و ثانیا مجاور عنصر مشخص شده باشد.

عناصر هم نیا و یا هم نژاد باید دارای عنصر پدر یکسانی باشند، و مجاور به این معناست که بدون واسطه به دنبال عنصر مشخص شده بیاید.

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

div + p {
    background-color: yellow;
}

selector هم نیای عمومی

selector هم نیای عمومی تمام عناصری را که هم نیای یک عنصر مشخص باشند را انتخاب میکند :

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

div ~ p {
    background-color: yellow;
}