انواع Combinatorها در CSS
در طراحی وب، Combinatorها نقش حیاتی در هدف‌گیری دقیق عناصر HTML دارند. این انتخابگرها به توسعه‌دهندگان اجازه می‌دهند روابط بین عناصر را تعریف کنند و استایل‌دهی را با دقت بیشتری انجام دهند.
1. Combinator فاصله (Descendant)
این پرکاربردترین Combinator است که با یک فاصله بین دو انتخابگر نمایش داده می‌شود. تمام عناصر فرزند (مستقیم یا غیرمستقیم) را هدف می‌گیرد:
- تمام تگ‌های p درون div را انتخاب می‌کند
- فرقی نمی‌کند چند سطح پایین‌تر باشند
- برای ساختارهای پیچیده ایده‌آل است
2. Combinator بزرگ‌تر از (Child)
با نماد > مشخص می‌شود و فقط فرزندان مستقیم را انتخاب می‌کند:
| نحوه استفاده |
توضیح |
| ul > li |
فقط لی‌های مستقیم زیر ul |
توجه: این Combinator عناصر تو در تو در سطوح پایین‌تر را انتخاب نمی‌کند.
3. Combinator خواهر و برادر مجاور (Adjacent Sibling)
با علامت + کار می‌کند و اولین عنصر بعدی که شرط را دارد انتخاب می‌کند:
- هر دو عنصر باید یک والد داشته باشند
- فقط عنصر بلافاصله بعدی انتخاب می‌شود
- برای تغییر استایل عناصر متوالی مفید است
مثال:
h2 + p { margin-top: 0; }
این کد فقط پاراگراف بلافاصله بعد از h2 را انتخاب می‌کند.
4. Combinator خواهر و برادر عمومی (General Sibling)
با علامت ~ مشخص می‌شود و تمام عناصر بعدی که شرط را دارند انتخاب می‌کند:
img ~ p {
font-style: italic;
}
این استایل روی تمام پاراگراف‌های بعد از تصویر اعمال می‌شود.
برای یادگیری عمیق‌تر می‌توانید به منبع مراجعه کنید.
جمع‌بندی
| Combinator |
نماد |
کاربرد |
| Descendant |
فاصله |
تمام فرزندان |
| Child |
> |
فرزندان مستقیم |
| Adjacent Sibling |
+ |
عنصر بعدی هم‌سطح |
| General Sibling |
~ |
تمام عناصر بعدی هم‌سطح |
با ترکیب این Combinatorها می‌توانید کنترل دقیقی روی عناصر صفحه داشته باشید و کدهای CSS تمیزتر و کارآمدتری بنویسید.
