جلسه ۲۵ : ترکیبات در CSS

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. یکی از مواردی که معمولا در هنگام طراحی در CSS بایداز آن استفاده کنید. تحلیل ارتباط بین عناصر و چگونگی دسترسی به عناصر تودرتو است. به این حالت combinator یا ترکیبات در CSS گفته می شود.  combinator در CSS در واقع ارتباط بین انتخابگرهای عناصر HTML در CSS را نشان می دهد. با استفاده از آن شما می توانید به عناصر فرزند در CSS دسترسی یافته و برای آن Style تعریف کنید. ترکیبات در CSS انتخاب های ساده در css را با هم ترکیب و انتخاب های رابطه ای و چندگانه را ایجاد می کند.

ترکیبات در CSS

در ادامه این آموزش ما شما را با انواع حالات combinator در CSS آشنا خواهیم کرد.

انواع combinator در CSS

ترکیبات در CSS دارای ۴ حالت مختلف می باشند:

• descendant selector (فاصله)
• child selector (عنصر فرزند (>))
• adjacent sibling selector (عنصر مجاور (+))
• general sibling selector (عناصر یک سطح(~))

descendant selector

این حالت تمام دسترسی به تمام عناصر فرزند یک عنصر را ممکن می سازد.

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

child selector (عناصر فرزند)

انتخابگر child selector تمام عناصری که فزرند مستقیم یک عنصر هستند را انتخاب می کند.

مثال زیر تمام عناصر <p> که داخل عنصر <div> قرار داشته و فرزند بلاواسطه <div> هستند را انتخاب می کند:

adjacent sibling selector (عناصر مجاور)

انتخابگر adjacent sibling selector تمام عناصر مجاور یک عنصر مشخص را انتخاب می کند.

عناصر مجاور باید عنصر والد مشترک داشته و بلافاصله پس از عنصر مشخص شده قرار داشته باشند.

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

general sibling selector (عناصر هم سطح)

انتخابگر general sibling selector تمام عناصر هم سطح عنصر مشخص شده را انتخاب می کند.

مثال زیر تمام عناصر <p> هم سطح عنصر <div> را انتخاب می کند:

کلام آخر

یکی از مواردی که در هنگام طراحی در CSS به آن نیاز دارید بحث ترکیبات در CSS است که به شما اجازه انتخاب عناصر مرتبط را می دهد، از این رو مباحث این آموزش را به آشنایی با combinator در CSS اختصاص داده ایم.