ترکیب‌کننده‌ها در CSS برای مشخص کردن روابط بین انتخابگرها (Selectors) استفاده می‌شوند. در CSS، چهار نوع ترکیب‌کننده وجود دارد که هر کدام روابط خاصی بین عناصر را توضیح می‌دهند.
انواع ترکیب‌کننده‌ها
انتخابگر نوادگان (Descendant Selector):
از یک فاصله بین انتخابگرها استفاده می‌کند و تمام عناصری را که نوادگان یک عنصر خاص هستند انتخاب می‌کند.
مثال:
انتخاب تمام عناصر <p> که داخل عناصر <div> قرار دارند:
div p {
background-color: yellow;
}انتخابگر فرزند (Child Selector) (>):
تنها عناصری را که به طور مستقیم فرزند یک عنصر مشخص هستند انتخاب می‌کند.
مثال:
انتخاب تمام عناصر <p> که مستقیماً فرزند یک عنصر <div> هستند:
div > p {
background-color: yellow;
}انتخابگر همسایه مجاور (Adjacent Sibling Selector) (+):
عنصری را که مستقیماً بعد از یک عنصر خاص قرار دارد انتخاب می‌کند. این عناصر باید فرزند یک والد مشترک باشند و باید “مجاور” باشند، به این معنا که بلافاصله بعد از عنصر قبلی قرار گیرند.
مثال:
انتخاب اولین عنصر <p> که بلافاصله بعد از یک عنصر <div> قرار دارد:
div + p {
background-color: yellow;
}انتخابگر همسایه کلی (General Sibling Selector) (~):
تمام عناصری را که به عنوان همسایه یک عنصر خاص هستند و فرزند یک والد مشترک می‌باشند انتخاب می‌کند.
مثال:
انتخاب تمام عناصر <p> که همسایه بعدی یک عنصر <div> هستند:
div ~ p {
background-color: yellow;
}این ترکیب‌کننده‌ها به شما این امکان را می‌دهند که کنترل دقیق‌تری روی نحوه انتخاب عناصر و سبک‌دهی آن‌ها داشته باشید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام