آموزش CSS - جلسه بیست و ششم
تاریخ انتشار:۱۴:۳ ۱۳۹۹/۱۱/۱۸

آموزش CSS - جلسه بیست و ششم


ترکیب کننده


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




ترکیب کننده ها در 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
{








منبع:learnsource


نظر به مطلب
نام:  
ایمیل:
متن:  500 حرف دیگر میتوانید تایپ کنید
کد امنیتی: 91691