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

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

ترکیب کننده 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
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

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