با سلام خدمت همراهان گرامی سایت پرنیان طرح
در آموزش امروز کار با ترکیب کننده ها 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]