ترکیب کننده ها در CSS
یک ترکیب کننده و یا combinator چیزی است که رابطه ی بین selector ها را مشخص میکند.
یک selector در CSS میتواند شامل بیش از یک selector ساده باشد. بین selector های ساده ، ما میتوانیم از ترکیب کننده ها استفاده کنیم.
چهار نوع ترکیب کننده در CSS۳ عبارت اند از :
- * 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
{