کاربرد Child و Adjacent Selector در CSS
در طراحی وب، Selectorها نقش اساسی در هدف‌گیری و استایل‌دهی به عناصر دارند. دو مورد از پرکاربردترین Selectorها، Child (>) و Adjacent (+) هستند که امکان کنترل دقیق‌تری بر عناصر صفحه فراهم می‌کنند.
Child Selector (>)
این Selector فقط عناصری را هدف می‌گیرد که مستقیماً فرزند عنصر والد باشند. به مثال زیر توجه کنید:
div > p {
color: #e74c3c;
}
در این کد، فقط پاراگراف‌هایی که مستقیماً درون div قرار گرفته‌اند قرمز می‌شوند. پاراگراف‌های تو در تو یا خارج از div تحت تأثیر قرار نمی‌گیرند.
| نوع Selector |
نماد |
کاربرد |
| Child |
> |
فرزندان مستقیم |
| Adjacent |
+ |
عنصر هم‌سایه بعدی |
Adjacent Selector (+)
این Selector عنصری را هدف می‌گیرد که بلافاصله پس از عنصر اول قرار گرفته باشد. مثال:
h2 + p {
font-weight: bold;
}
در این حالت، فقط پاراگرافی که مستقیماً بعد از تگ h2 آمده باشد، پررنگ می‌شود. سایر پاراگراف‌ها تغییری نمی‌کنند.
نکته کلیدی: Adjacent Selector فقط یک عنصر را انتخاب می‌کند (اولین عنصر بعدی) و برخلاف General Sibling (~) تمام عناصر بعدی را شامل نمی‌شود.
کاربردهای عملی
این Selectorها در موارد زیر بسیار مفید هستند:
- استایل‌دهی به منوهای آبشاری بدون تأثیر بر سطوح دیگر
- تنظیم فاصله‌های خاص بین عناصر مجاور
- ایجاد افکت‌های تعاملی بین عناصر مرتبط
- کنترل دقیق فرم‌ها و عناصر ورودی
برای مثال‌های بیشتر و آموزش پیشرفته‌تر می‌توانید اینجا را دنبال کنید.
تفاوت‌های کلیدی
Child Selector
- روابط والد-فرزندی را هدف می‌گیرد
- فقط یک سطح پایین‌تر عمل می‌کند
- برای ساختارهای سلسله‌مراتبی ایده‌آل است
Adjacent Selector
- روابط هم‌سایگی را هدف می‌گیرد
- فقط عنصر بلافاصله بعدی را انتخاب می‌کند
- برای چیدمان‌های خطی مناسب است
با ترکیب این Selectorها می‌توانید کنترل بسیار دقیقی بر ظاهر و چیدمان صفحات وب داشته باشید. پیشنهاد می‌کنیم برای تسلط بیشتر، تمرین‌های عملی مختلفی را انجام دهید.
