Hello Friends,

Welcome To Notebility!

A combinator is something that explains the relationship between the selectors.

There are four different combinators in CSS:

  1. descendant selector (space)
  2. child selector (>)
  3. adjacent sibling selector (+)
  4. general sibling selector (~)

To understand the all >,+,~ sign in css to what is the meaning and how to use it in css.let us take a sample code to understand the signs.


<div class="container">       
    <p>Parent element</p>
    <div>
        <p>Child element</p>
    </div>
    <p>Parent element</p>
    <p>Parent element</p>
    <p>Parent element</p>
</div>

1) Descendant selector (space)


.container p {
    border: 1px solid #102f4f;
    color:indigo;
}

It is called a Descendant selector. It will target all p tags within the container class. That means it targets all <p> tags which are descendants of class="container".


<div class="container">       
    <p>Parent element</p> <!-- affected element -->
    <div>
        <p>Child element</p> <!-- affected element -->
    </div>
    <p>Parent element</p> <!-- affected element -->
    <p>Parent element</p> <!-- affected element -->
    <p>Parent element</p> <!-- affected element -->
</div>

2) child selector (>)


.container > p{
    border: 1px solid #102f4f;
    color:indigo;
}

It is called a child selector. It only selects the p tag which is direct children of a container class.That means it selects all <p> which is direct children of class="container".


<div class="container">
    <p>Parent element</p> <!-- affected element -->
    <div>
        <p>Child element</p>
    </div>
    <p>Parent element</p> <!-- affected element -->
    <p>Parent element</p> <!-- affected element -->
    <p>Parent element</p> <!-- affected element -->
</div>

3) adjacent sibling selector (+)


div + p{
    border: 1px solid #102f4f ;
    color:indigo;
}

It is called an adjacent sibling selector.The adjacent sibling selector is used to select an element that is directly after another specific element.

That means it selects the <p> tag which is after the div and its child <p> tag.


<div class="container">
    <p>Parent element</p>
    <div>
        <p>Child element</p>
    </div>
    <p>Parent element</p> <!-- affected element -->
    <p>Parent element</p>
    <p>Parent element</p>
</div>

4) General sibling selector (~)

It is called a General sibling selector. It is a general sibling combinator and similar to Adjacent sibling combinator.

The difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that are preceded by the former selector.


div ~ p{
    border: 1px solid #102f4f;
    color:indigo;
}

That means It will select all <p> elements that are siblings of <div> elements.


<div class="container">
    <p>Parent element</p>
    <div>
        <p>Child element</p>
    </div>
    <p>Parent element</p> <!-- affected element -->
    <p>Parent element</p> <!-- affected element -->
    <p>Parent element</p> <!-- affected element -->
</div>

Thanks for reading…