🎁 تخفیف تمامی پکیج های آموزشی 🎁

Combinator ها در CSS - آموزش طراحی سایت

در این بخش از آموزش طراحی سایت، به آموزش Combinator ها در CSS می پردازیم.

Combinator ها در CSS - آموزش طراحی سایت

Combinator نمادی است که رابطه بین سلکتورها را توصیف می کند. Combinator در زبان انگلیسی به معنای ترکیب کننده می باشد، دلیل نام گذاری این سلکتورها به Combinator این می باشد که آن ها سلکتورها را باهم ترکیب می کنند و باعث ایجاد یک رابطه ی مناسب با یکدیگر و مکان محتوا در متن می شوند.

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

یک سلکتور می تواند شامل بیشتر از یک سلکتور ساده باشد. بین سلکتورهای ساده ما می توانیم یک combinator اضافه کنیم.

در CSS چهارنوع combinator وجود دارد:

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

سلکتور Descendant (سلکتورهایی که بینشان فاصله وجود دارد)

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

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش Combinator ها در CSS

سلکتور Child

سلکتور child تمام فرزندان مستقیم یک عنصر خاص را انتخاب می کند. مثال زیر تمام عناصر p که فرزند مستقیم عنصر div هستند را انتخاب می کند:

آموزش Combinator ها در CSS

خروجی مثال بالا به شکل زیر است:

آموزش CSS

 سلکتور Adjacent Sibling  (همزاد مجاور)

سلکتور adjacent sibling تمام عناصری که همسایه های همزاد یک عنصر خاص هستند را انتخاب می کند. عناصر همزاد باید عنصر والد یکسان داشته باشند. مثال زیر تمام عناصر p را که بلافاصله بعد از عنصرهای div قرار گرفتند را مشخص می کند:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش CSS

سلکتور General sibling

سلکتور General sibling (عناصر فرزند همزاد) تمام عناصر هم سطح عنصر مشخص شده را انتخاب می کند. و کافیست که این عناصر، یک والد داشته باشند و اهمیتی ندارد که دقیقا پشت سر هم باشند. سلکتور general sibling تمام عناصر که همزاد یک عنصر به خصوص می باشند را انتخاب می کند. مثال زیر تمام عناصر p که همزاد div هستند را انتخاب می کند:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش CSS
آموزش طراحی سایت آموزش CSS آموزش HTML آموزش Combinator ها در CSS آموزش CSS Combinator

مقالات این دسته بندی