CSS Combinators Tutorial: Descendant, Child, Adjacent & Sibling Explained

INTRODUCTION

Combinators are used to define the relation between selectors. Hence an combinator is placed between two selectors. Based on the relation we can select elements to which CSS rule is applied. There are various types of Combinators which establishes different relationships between elements. Below is list of all Combinator available in CSS.

• Descendant Combinator (Space)
• Child Combinator (>)
• Next Sibling Combinator (+) (Adjacent Sibling Combinator)
• Subsequent Sibling Combinator (~)

Descendant Combinator

The descendant combinator is used to select elements that are nested inside another element at any level of depth. It doesn’t matter how deep the second element is; as long as it exists somewhere within the first element, it will be selected. Descendant Combinator is represented by single space(" ") between two selectors.

This combinator is very useful when you want to apply styles based on a general ancestor context, without requiring the structure to be strictly direct or specific.

For example, div p will target every <p> element inside a <div>, whether it’s a direct child or deeply nested.

Syntax:

selector1 selector2{ 
        CSS RULE; 
 }

Example: In the below example the <p> element which is inside <div> and inside <span> both are descendants of <div>. Hence the CSS rule is applied to both.

div p { 
     color: blue; 
 }
                             

<p> This paragraph is outside div. </p> 
<div> 
  <p> This paragraph is inside div. </p>
  <span> 
       <p> This paragraph is inside span with div as ancestor. </p>
  </span> 
</div>    
                                
                             

Child Combinator

Child Combinator is represented by >. It selects only the elements that are direct children of a specific parent. This combinator is ideal for applying styles in a structured and controlled manner, especially in layouts and menus, where child elements must be styled differently from nested ones.

For instance, ul > li will select only those <li> elements that are immediate children of a <ul>, and not any <li> nested deeper inside another tag.

Syntax:

selector1 > selector2{ 
        CSS RULE; 
 }

Example: In the above example the first <p> element which is inside <div> is direct child of <div>. Hence the CSS rule is applied to only first <p>. The <p> inside <span> is not direct child of <div>, so no CSS rule is applied to it.

div > p { 
     color: blue; 
 }

<p> This is paragraph which is not child of div </p> 
<div> 
  <p> This is paragraph which is direct child of div </p>
  <span> 
    <p> This is paragraph inside span and not direct child of div </p>
  </span> 
</div>    

Adjacent/Next Sibling Combinators

The adjacent sibling combinator selects an element that comes immediately after another element and shares the same parent. This combinator is represented by +

It’s useful when you want to change the style of an element based on what comes right before it. This can be applied for styling notifications, headings followed by descriptions, or lists with dynamic spacing, providing very specific and contextual styling.

For example, h2 + p selects the first <p> tag that appears right after an <h2> tag.

Syntax:

selector1 + selector2{ 
        CSS RULE; 
 }

Example: In the above example the <h2> and first <p> element are both siblings of <div> and <p> commes immediately after <h2>. This satisfy condition of Next-sibling combinator and CSS rule is applied to first <p>.

h2 + p { 
     color: blue; 
 }

<p> This paragraph is not child of div. </p> 
<div> 
     <h2> This is h2 heading </h2>
     <p> This paragraph is sibling of h2 and comes immediately after h2. </p>
   <span> 
       <p> This paragraph is inside span and not sibling of h2. </p>
   </span> 
     <p> This paragraph is other sibling of h2 and does not comes immediately after h2. </p>
</div>    
                                
                             

Subsequent Sibling Combinators

Subsequent Sibling Combinator is represented by (~). This combinator selects all sibling elements that follow a specific element and share the same parent, not just the immediate one.

This is useful when the order of elements matters and you want to apply styles to a group of elements that follow a certain one, like making all paragraphs after a certain heading appear in a different style or layout.

For example, h2 ~ p will select every <p> element that comes after an <h2> under the same parent, regardless of what elements are in between.

Syntax:

selector1 ~ selector2{ 
        CSS RULE; 
 }

Example:

h2 ~ p { 
     color: blue; 
 }

In the above exapmle we want to select all <p> element which comes after <h1> and are siblings of it. So we use Subsequent Siblings Combinator (h1 ~ p).

Frequently Asked Questions (FAQ)

parent > child {
  /* CSS rules */
}

A ~ B {
  /* styles for B */
}

A + B {
  /* styles for B */
}

section > div p + span {
  color: red;
}