آموزش جامع CSS Combinators

درک CSS Combinators

وقتی که به استایل‌دهی با CSS می‌رسیم، یکی از مباحث مهم و جذاب، نحوه انتخاب المان‌ها برای استایل‌دهی به کمک CSS Combinators است. این کامبیناتورها به شما این امکان را می‌دهند تا بدون نیاز به افزودن کلاس‌های اضافی، با استفاده از ساختار HTML، به سادگی المان‌ها را هدف بگیرید. اگر شما می‌خواهید مشابه جی‌کوئری المان‌هایی همچون فرزندان خاص یک عنصر یا المان‌هایی که در کنار یکدیگر هستند را استایل دهید، CSS Combinators دقیقاً چیزی است که به آن نیاز دارید.

چهار نوع کامبیناتور در CSS وجود دارد: کامبیناتور سراسری (space ..)، کامبیناتور فرزند (.. > ..)، کامبیناتور برادر جانبی (.. + ..) و کامبیناتور برادر عمومی (.. ~ ..). هر یک از این‌ها کاربردهای خاص خودش را دارد و می‌تواند در شرایط متفاوت به شما کمک کند. درک مفهوم هر یک از این کامبیناتورها می‌تواند باعث ساده‌تر شدن کدنویسی و مدیریت استایل‌ها گردد.

در کامبیناتور سراسری که با فاصله‌ی خالی نمایش داده می‌شود، شما می‌توانید تمامی المان‌هایی را که درون یک عنصر دیگر قرار دارند انتخاب کنید. فرض کنید یک divدارید که تعدادی تگ p درون آن قرار دارد؛ با استفاده از کامبیناتور سراسری، تمامی این pها را می‌توانید انتخاب کنید.

کامبیناتور فرزند که با علامت > نشان داده می‌شود، فقط به شما اجازه می‌دهد که فرزندان مستقیم یک عنصر را انتخاب کنید. مثلاً اگر المانی در یک div وجود دارد، ولی در عنصر بعدی نیست، توسط این کامبیناتور انتخاب نمی‌شود.

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

حالا بیایید نگاهی به مثال‌های عملی بیندازیم تا بهتر با کاربرد هر یک آشنا شویم.

مثال‌های عملی با CSS Combinators

<style>
  div p {
    color: blue;
  }

  div > p {
    font-weight: bold;
  }

  h2 + p {
    background-color: yellow;
  }

  h2 ~ p {
    color: red;
  }
</style>

<div>
  <p>This is a paragraph inside a div.</p>
  <section>
    <p>Another paragraph, but nested in a section.</p>
  </section>
</div>

<h2>Heading 2</h2>
<p>Paragraph right after h2.</p>
<p>Another paragraph, not immediately after h2.</p>
<p>One more paragraph.</p>
  

توضیح خط به خط کد