ترکیب کننده ها (Combinators)
«ترکیب کننده ها (Combinators)» رابطه بین دو انتخاب گر را مشخص می کنند. «انتخاب گر (Selector)» یعنی آدرس دهی به عنصرها. با ترکیب کننده ها، دقیق تر هدف می گیریم؛ مثل گفتن «فقط پاراگراف های داخل این جعبه».
انواع ترکیب کننده ها در CSS
چهار نوع داریم: «نسل بعدی» با فاصله ساده، «فرزند» با >، «خواهرِ بعدی» با +، و «همه خواهرهای بعدی» با ~.
نسل بعدی: فاصله ساده
«نسل بعدی (Descendant)» همه نوادگان را می گیرد؛ فرزند، نوه و بیشتر.
<style>
div p {
background-color: yellow;
}
</style>
<div>
<p>این پاراگراف هایلایت می شود.</p>
<section>
<p>این هم نواده است و می گیرد.</p>
</section>
</div>
فرزند مستقیم: >
«فرزند (Child)» فقط بچه های مستقیم عنصر را می گیرد؛ نه نوه ها.
<style>
div > p {
background-color: yellow;
}
</style>
<div>
<p>فقط این چون فرزند مستقیم است.</p>
<section>
<p>این نوه است و نمی گیرد.</p>
</section>
</div>
خواهرِ بعدی: +
«خواهرِ بعدی (Next sibling)» فقط عنصرِ هم سطحِ بلافاصله بعدی را می گیرد.
<style>
div + p {
background-color: yellow;
}
</style>
<div>جعبه</div>
<p>این بلافاصله بعد از div است.</p>
<p>این دیگر انتخاب نمی شود.</p>
همه خواهرهای بعدی: ~
«Subsequent-sibling» همه خواهرهای هم سطحِ بعدی را می گیرد؛ نه فقط اولی.
<style>
div ~ p {
background-color: yellow;
}
</style>
<p>قبل از div است و نمی گیرد.</p>
<div>جعبه</div>
<p>این انتخاب می شود.</p>
<p>این هم انتخاب می شود.</p>
نکته: اگر چیدمان می خواهی، سراغ نمایش خطی-بلوک یا تراز کردن برو. ترکیب کننده هدف گیری است، نه چیدمان.
منبع W3Schools: Combinators — برای جدول مرجع کامل، این صفحه مرجع را ببین: CSS Combinators Reference.
جمع بندی سریع
- فاصله = همه نوادگان.
- > = فقط فرزند مستقیم.
- + = فقط خواهرِ بلافاصله بعدی.
- ~ = همه خواهرهای بعدی.
- چیدمان نمی سازد؛ فقط هدف می گیرد.