در CSS، ترکیب کننده‌ها (combinators) ابزارهای بسیار مهمی هستند که به ما امکان می‌دهند تا با انتخابگرهای پیچیده‌تر و هوشمندانه‌تری از بین عناصر HTML موجود، انتخاب کنیم. یکی از این ترکیب کننده‌ها، "ستون" نیست بلکه "ترکیب کننده خواهران عمومی" (~) هست که به ما اجازه میده تا خواهران یک عنصر خاص را انتخاب کنیم که بعد از آن عنصر می‌آید. در این مطلب قصد داریم به شما نشان دهیم چطور می‌توانید از این ترکیب کننده استفاده کنید و در مثال‌هایی که ارائه می‌دهیم، چطور می‌توانید آن را در پروژه‌های واقعی به کار ببرید.
قبل از هرچیزی، باید بدانیم که ترکیب کننده‌ها عملیاتی هستند که ما را قادر می‌سازند تا روابط بین عناصر DOM را تعریف کنیم. در مورد ترکیب کننده خواهران عمومی، این ترکیب کننده اجازه می‌دهد تا عناصری که بعد از یک عنصر خاص و هم‌سطح آن هستند را هدف قرار دهیم. به عنوان مثال، فرض کنید می‌خواهیم تکنیک‌هایی برای استایل دهی به یک عنصر خاص و تمام خواهران آن که بعد از آن در سند می‌آیند، بیاموزیم.
ترکیب کننده خواهران عمومی معمولاً در طراحی‌های واکنش گرا و تعاملی استفاده می‌شود. مثلاً ممکن است بخواهید روی عنصری که توسط جاوا اسکریپت فعال شده، تاثیری بگذارید و بعد استایل‌های خود را به عناصری که بعد از آن می‌آیند، اعمال کنید. این قابلیت به طراحی‌های خلاقانه کمک شایانی می‌کند.
برای درک بهتر، بیایید به یک مثال ساده نگاهی بیندازیم که نشان می‌دهد چطور می‌توان از ترکیب کننده خواهران عمومی برای ساختارهای پیشرفته‌تر استفاده کرد.
<style>
div.example > p {
background-color: lightblue;
padding: 10px;
}
div.example > p ~ span {
color: red;
font-weight: bold;
}
</style>
<div class="example">
<p>این پاراگراف اول است.</p>
<span>این یک متن اسپن است.</span>
<p>این پاراگراف دوم است.</p>
<span>این یک متن اسپن دیگر است.</span>
</div>
در این کد:
<style> آغاز بخش CSS می‌باشد که در آن استایل هایمان را تعریف می‌کنیم.با استفاده از div.example > p، تمام پاراگراف‌های مستقیم داخل "example" را انتخاب کرده‌ایم و به آن بک‌گراند آبی کم‌رنگ و padding داده‌ایم.
div.example > p ~ span همه <span> هایی که بعد از پاراگراف مستقیم داخل "example" هستند با رنگ قرمز و فونت ضخیم هدف قرار گرفته‌اند.</style> پایان دادن بخش CSS.این مثال نشان می‌دهد چگونه از ترکیب کننده خواهران عمومی برای انتخاب عناصر بعدی استفاده کنید.