Descendant combinator is a parent-and-child selector in CSS. In this, a child element will be selected only when there’s a parent element present.

Another way to put it is that it will select a child element only if it’s nested inside a parent (or ancestor) element, no matter how deep down the nested element is.

So, here’s an example of an HTML and CSS file to grab the concept thoroughly:

<div class="grandfather">
         <h2>Hello Grandfather</h2>
      <div class="father">
           <h2>Hello Father</h2>
        <div class="child">
            <h2>Hello Child</h2>
        </div>
      </div>
 </div>

.grandfather .child {
  color: red;
}

These codes above selects the child class and colors the ‘Hello Child’ text red. Notice that there’s a space between the selected classes. That’s how the descendant combinator works.