What are CSS Combinators?

CSS combinators are the combination of the other elements that you can use and take the relationship between another selector. CSS combinators have four types the combination as below:

(space) = Descendant selector

(>)       = Child selector

(+)       = Adjacent sibling selector

(~)       = General sibling selector

What is the Descendant Selector?

Descendant Selector is the select only in the descendant order. The below example is showing effected div inside from the section tag. Other tags will not be affected.

"section div"

<style>

section div {

  background: #0bf;

}

</style>

<section>

  <div>content text.content text.</div>

  <div>content text.content text.</div>

  <div><p>Paragraph 3 in the div.</p></div>

  <article><div>Paragraph 3 in the div.</div></article>

</section>

<div> It will not effected</div>

<h4> It will not effected</h4>

What is the child selector?

The child selector is the select only direct child. In this example, we are selecting div child inside of the section elements. Other tags will not be affected as we using div inside of the article elements, we take combination with the symbol of the (> greater than) below code example:

<style>

section > div {

  background: #0bf;

}

</style>

   <section>

        <div>content text.content text.</div>

        <div>content text.content text.</div>

        <article><div>Article text not direct child</div></article>

        <div><p>content text.content text</p></div>

      </section>

      

      <div> It will not effected</div>

      <h4> It will not effected</h4>

 What is the adjacent sibling selector?

In this example adjacent sibling selector is the select immediately div of the section.  Other div will not be affected. Example code below:

<style>

        section+div {

            background: #0bf;

        }

    </style>

<div>Out side from the section</div>

    <section>

        <div>Inside of the section</div>

        <article>

            <div>Article text not direct child</div>

        </article>

        <div>

            <p>content text.content text</p>

        </div>

    </section>

    <div>Only It will effected because this immediatly div of the section</div>

    <div>content text.content text.</div>

What is the general sibling selector?

General Sibling Selector is the select immediately all siblings div of the section.  Other div will not be affected. We use between div siblings span but it's not showing effect.  below example code:

<style>

        section ~ div {

            background: #0bf;

        }

    </style>

<div>Out side from the section</div>

    <section>

        <div>Inside of the section</div>

        <article>

            <div>Article text not direct child</div>

        </article>

        <div>

            <p>content text.content text</p>

        </div>

    </section>

    <div> effected because this is siblings div</div>

    <div>effected because this is siblings div</div>

    <span>this is not siblings div</span>

    <div>effected because this is siblings div</div>

    <div>effected because this is siblings div</div>