combinator در css

Combinator در css مبحثی است که در مقاله امروز به آن می پردازیم:

یک combinator روابط بین selectorها را توضیح می دهد. یک CSS selector می تواند شامل بیش از یک سلکتور ساده باشد که برای ارتباط بین این سلکتورهای ساده، می توانیم از combinatorها استفاده کنیم.

انواع combinator در css

در سی اس اس، ۴ نوع مختلف combinator داریم:

• descendant selector (space)
• child selector (<)
• adjacent sibling selector (+)
• general sibling selector (~)

Descendant Selector

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

مثال زیر، تمام المان های <p> درون المان <div> را انتخاب می کند:

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

div p {
  background-color: yellow;
}

Paragraph 4. Not in a div.

Paragraph 5. Not in a div.

Child Selector

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

مثال زیر، تمام المان های <p> که فرزند<div> هستند را انتخاب می کند:

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
  <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

div > p {
  background-color: yellow;
}

Paragraph 5. Not in a div.

Paragraph 6. Not in a div.

Adjacent Sibling Selector

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

مثال زیر، تمام المان های <p> که بلافاصله پس از المان <div> هستند را انتخاب می کند:

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

div + p {
  background-color: yellow;
}

Paragraph 3. Not in a div.

Paragraph 4. Not in a div.

General Sibling Selector

نوع آخر Combinator در css شامل General Sibling Selector می باشد.

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

مثال زیر، تمام المان های <p> که والد مشترکی با <div> دارند (sibling) را انتخاب می کند:

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

div ~ p {
  background-color: yellow;
}

Paragraph 1.

Paragraph 3.

Paragraph 4.