ترکیب کننده‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها
یک ترکیب کننده رابطه بین انتخابگرها را توضیح می‌دهد.

یک انتخابگر CSS می‌تواند شامل بیش از یک انتخابگر ساده باشد. در میان انتخابگرهای ساده، می‌توانیم یک ترکیب کننده داشته باشیم.[۱]

در CSS چهار ترکیب کننده متفاوت وجود دارد:

  • انتخابگر نسل (فضای خالی)
  • انتخابگر فرزند (<)
  • انتخابگر خواهر و برادر (+)
  • انتخابگر خواهر و برادر عمومی (~)

انتخابگر نسل

انتخابگر نسل تمامی عناصری را که از نسل عنصر به خصوصی باشند را انتخاب می‌کند.

مثال زیر تمامی عناصر <p> درون عنصر <div> را انتخاب می‌کند.

مثال
div p {
  background-color: yellow;
}


انتخابگر فرزند

انتخابگر فرزند تمامی عناصری را که فرزند عنصر به خصوصی باشند را انتخاب می‌کند.

مثال زیر تمامی عناصر <p> که فرزند عنصر <div> هستند را انتخاب می‌کند.

مثال
div > p {
  background-color: yellow;
}


انتخابگر خواهر و برادر

انتخابگر خواهر و برادر مجاور تمامی عناصری را که خواهر و برادر مجاور یک عنصر به خصوص هستند را انتخاب می‌کند.

عناصر خواهر و برادر می‌بایست عنصر والد یکسانی داشته باشند، و کلمه "adjacent" به معنای «بلافاصله» است.

مثال زیر تمامی عناصر <p> را که بلافاصله بعد از عناصر <div> قرار می‌گیرند را انتخاب می‌کند:

مثال
div + p {
  background-color: yellow;
}


انتخابگر خواهر و برادر عمومی (به انگلیسی: General)

انتخابگر خواهر و برادر عمومی تمامی عناصری را که خواهر و برادر یک عنصر به خصوص هستند را انتخاب می‌کند.

مثال زیر تمامی عناصر <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> آمده است را انتخاب می‌کند


منابع آموزشی