آموزش ترکیب کننده های CSS

12 جولای 2021

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

ترکیب کننده چیزی است که رابطه بین انتخاب کنندگان را توضیح می دهد.

یک انتخابگر CSS می تواند بیش از یک انتخابگر ساده داشته باشد. بین انتخابگرهای ساده ، می توانیم یک ترکیب کننده قرار دهیم.

چهار ترکیب کننده مختلف در CSS وجود دارد:

  • منتخب ذریه (فضا)
  • انتخابگر کودک (>)
  • انتخاب خواهر و برادر مجاور (+)
  • انتخاب کننده عمومی خواهر و برادر ()

منتخب ذریه

انتخاب کننده ذریه با تمام عناصری که فرزندان یک عنصر مشخص هستند مطابقت دارد.

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

مثال

div p {
  background-color: yellow;
}

انتخابگر کودک (>)

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

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

مثال

div > p {
  background-color: yellow;
}

انتخاب خواهر و برادر مجاور (+)

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

عناصر خواهر و برادر باید همان عنصر اصلی را داشته باشند ، و “مجاور” به معنی “بلافاصله به دنبال” است.

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

مثال

div + p {
  background-color: yellow;
}

انتخابگر خواهر و برادر عمومی ()

انتخابگر عمومی خواهر و برادر ، همه عناصری را که خواهر و برادر بعدی عنصر مشخصی هستند انتخاب می کند.

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

مثال

div ~ p {
  background-color: yellow;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.