Combinators, are ways to combine different selector into a new exact selector. A combinator explains the relationship between the selectors.

There are 4 types of combinators in CSS:-

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

1. descendant combinator-

It matches all elements that are descendant of a particular element. It selects all the child of the parent class.

e.g of descendant combinator:-

<style>
ul li {
    background-color: yellow;
}
</style>
<ul>
  <li>List Item 1</li>
  <li>List Item 2
    <ol>
      <li>List Item 2-1</li>
      <li>List Item 2-2</li>
    </ol>
  </li>
  <li>List Item 3</li>
</ul>

Color of all the elements will be yellow.

2. Child combinator-

It selects the immediate child of the parent.

e.g of child selector:-

<style>
ul li{background-color:yellow}
</style>
<ul>
  <li>List Item 1</li>
  <li>List Item 2
    <ol>
      <li>List Item 2-1</li>
      <li>List Item 2-2</li>
    </ol>
  </li>
  <li>List Item 3</li>
</ul>

In this only the items 1, 2 and 3 will be listed with yellow background, because these are the immediate child of parent.

3. Adjacent sibling combinator-

In this only the first element of the parent will be targeted.

e.g of adjacent sibling is:-

<style>
h1+p{font-size:30px;}
</style>

<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

Only the size of the first paragraph will be increased.

4. general sibling combinator-

In this all the elements of the parent will be targeted.

<style>
h1~p{font-size:30px;}
</style>

<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

The size of all the p tag will be increased.