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

یک ترکیب کننده و یا combinator چیزی است که رابطه ی بین selector ها را مشخص میکند. در این فصل با انواع ترکیب کننده در 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;
}
خودتان امتحان کنید

 

دیدگاه ها

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید

هدف لرن سورس

لرن سورس با هدف ایجاد یک مرجع کامل و جامع در زمینه آموزش دوره محور زبان های برنامه نویسی و وب پا به عرصه وب گذاشته است.

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

بخش های اصلی

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

راه های ارتباطی

شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید:

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.