Combinators in CSS

CSS combinators are used to define the relationship between selectors.

They allow you to apply styles to elements based on their relationship with other elements in the HTML structure. 

There are four types of combinators in CSS

  1. Descendant Combinator ( )
  2. Child Combinator (>)
  3. Adjacent Sibling Combinator (+)
  4. General Sibling Combinator (~)


Descendant Combinator (Space)

The descendant combinator is used to select all elements that are descendants of a specified element. The descendant can be a child, grandchild, or any level down the hierarchy.

<style>
    div p {
        color: blue;
    }
</style>
<div>
    <p>This paragraph is inside a div and will be blue.</p>
    <p>This paragraph is also inside a div and will be blue.</p>
</div>
<p>This paragraph is outside the div and will not be blue.</p>

the CSS selector div p selects all <p> elements that are descendants of a <div> element, no matter how deeply nested they are. The paragraphs inside the <div> will be blue, while the one outside will not be affected.


Child Combinator (>)

The child combinator selects only the direct children of a specified element.

<style>
    div > p {
        color: green;
    }
</style>

<div>
    <p>This paragraph is a direct child of div and will be green.</p>
    <div>
        <p>This paragraph is nested inside another div and will not be green.</p>
    </div>
</div>

<p>This paragraph is outside the div and will not be green.</p>

the CSS selector div > p targets only the <p> elements that are direct children of a <div>. The first paragraph will be green, but the nested one inside another <div> won't be affected.


Adjacent Sibling Combinator (+)

The adjacent sibling combinator selects an element that is immediately next to another specified element.

<style>
    h1 + p {
        color: red;
    }
</style>

<h1>Heading</h1>
<p>This paragraph comes immediately after the heading and will be red.</p>
<p>This paragraph will not be red because it is not immediately after the heading.</p>

h1 + p selects the <p> element that directly follows an <h1> element. Only the first paragraph after the heading will turn red.


General Sibling Combinator (~)

The general sibling combinator selects all elements that are siblings of a specified element, but not necessarily immediately next to it.

<style>
    h1 ~ p {
        color: purple;
    }
</style>

<h1>Heading</h1>
<p>This paragraph is a sibling of the heading and will be purple.</p>
<p>This paragraph is also a sibling of the heading and will be purple.</p>

The selector h1 ~ p will select all <p> elements that are siblings of the <h1> element, regardless of whether they are immediately next to it or not. Both paragraphs following the heading will be purple.


Summary

  • Descendant Combinator selects all descendants (children, grandchildren, etc.) of an element.
  • Child Combinator selects only direct children of an element.
  • Adjacent Sibling Combinator selects the element immediately following another element.
  • General Sibling Combinator selects all siblings following another element.

These combinators are powerful tools for targeting elements in your CSS based on their position relative to other elements in the HTML structure.