آموزش استفاده از ترکیب کننده هاCombinators در Css

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

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

در اموزش امروز قصد داریم کار با ترکیب کننده ها combinator در css را باهم مرور کنیم.

در ادامه آموزش همراه ما باشید.

با سلام خدمت همراهان گرامی سایت پرنیان طرح

در آموزش امروز کار با ترکیب کننده ها combinator را در css با هم مرور خواهیم کرد.

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

ما میتوانیم بین انتخابگرهای ساده، چهار نوع مختلف از ترکیب کننده ها را قرار دهیم.

 

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

به طور کلی در css چهار نوع محتلف از ترکیب کننده ها را داریم:

  • انتخابگر نواده                       Descendant Selector      (فضای خالی یا space)
  • انتخابگر فرزند                                  Child Selector     (<)
  • انتخابگر هم نیای مجاور   Adjacent Sibling Selector     (+)
  • انختابگر هم نیای عمومی  General Sibling Selector     (~)

 

انتخابگر نواده  Descendant Selector

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

مثال زیر تمام المان های <p>  درون یک المان <p> را انتخاب می کند. و دور آنها یک پس زمینه زرد رنگ ایجاد می کند:

مثال:

[php]
div p {
background-color: yellow;
}
[/php]

نتیجه را ببینید.

انتخابگر فرزند  Child Selector

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

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

مثال:

[php]
div > p {
background-color: yellow;
}
[/php]
نتیجه را ببینید.

انتخابگر هم نیای مجاور  Adjacent Sibling Selector 

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

این عناصر باید عنصر پدر یکسان داشته باشند.

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

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

مثال:

[php]
div + p {
background-color: yellow;
}
[/php]

نتیجه را ببینید.

انتخابگر هم نیای عمومی  General Sibling Selector 

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

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

مثال:

[php]
div ~ p {
background-color: yellow;
}
[/php]

نتیجه را ببینید.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت