ترکیب‌کننده‌های CSS
- صفحه قبل ترازئی CSS
- صفحه بعدی پس‌آمدهای CSS
ترکیب‌کننده‌های CSS
ترکیب‌کننده یک مکانیزم برای توضیح ارتباط بین انتخابگرها است.
انتخابگرهای CSS می‌توانند شامل چندین انتخابگر ساده باشند. در بین انتخابگرهای ساده می‌توانیم یک ترکیب‌کننده قرار دهیم.
در CSS چهار نوع مختلف از ترکیب‌کننده وجود دارند:
- انتخابگرهای فرزند پس از (فاصله)
- انتخابگرهای فرزند (
>) - انتخابگرهای برادر نزدیک (
+) - انتخابگرهای برادر عمومی (
~)
انتخابگرهای فرزند پس از
انتخابگرهای فرزند پس از با همه عناصر فرزند پس از عناصر مشخص شده مطابقت دارند.
در مثال زیر، همه عناصر <p> در داخل عناصر <div> انتخاب می‌شوند:
مثال
div p {
background-color: yellow;
}
انتخابگرهای فرزند
انتخابگرهای فرزند با همه عناصر فرزند که به عنوان عناصر مشخص شده قرار دارند مطابقت دارند.
در مثال زیر، همه عناصر <p> که به عنوان فرزند عناصر <div> قرار دارند انتخاب می‌شوند:
مثال
div > p {
background-color: yellow;
}
انتخابگرهای برادر نزدیک
انتخابگرهای برادر نزدیک با همه عناصر برادر نزدیک که به عنوان عناصر مشخص شده قرار دارند مطابقت دارند.
عناصر برادر (درجه همگانی) باید دارای پدر یکسان باشند،
در مثال زیر، همه عناصر <p> که درست پس از عناصر <div> قرار دارند انتخاب می‌شوند:
مثال
div + p {
background-color: yellow;
}
انتخابگرهای برادر عمومی
انتخابگرهای برادر عمومی با همه عناصر همگانی که درجه همگانی با عناصر مشخص شده دارند مطابقت دارند.
در مثال زیر، همه عناصر <p> که درجه همگانی با عناصر <div> دارند انتخاب می‌شوند:
مثال
div ~ p {
background-color: yellow;
}
تمام انتخابگرهای ترکیبی CSS
| انتخابگر | نمونه | توضیحات نمونه |
|---|---|---|
| element element | div p | انتخاب همه عناصر <p> در داخل عناصر <div>. |
| element>element | div > p | انتخاب تمام عناصر <p> که والد آن عناصر <div> است. |
| element+element | div + p | انتخاب تمام عناصر <p> که پس از عناصر <div> قرار دارند. |
| element1~element2 | p ~ ul | انتخاب تمام عناصر <ul> که دارای علامت <p> هستند. |
خواندن بیشتر
کتاب خارجی:انتخابگر فرزند CSS
کتاب خارجی:انتخابگر فرزند CSS
کتاب خارجی:انتخابگر برادران نزدیک CSS
- صفحه قبل ترازئی CSS
- صفحه بعدی پس‌آمدهای CSS
