CSS descendant selector

A descendant combinator or selector can select any child, grandchild or child of grandchild element. Parent and descendant elements are separated by a space.

See the syntax given below to understand.

<style>
div p{
 color:blue;
 font-size:18px;
 font-family:fantasy;
}
</style>
Try </>

div and p are separated by a space. Descendant selector selects and styles the p element.

descendant selector is different from the child selector.

Now you may have a question what is the difference between child and descendent selectors?

It often confuses the designers to differentiate between these two selectors.

Difference between descendant and child combinator

A child selector can select only child element and can not select a grandchild element. But a descendant selector can select the child and grandchild elements.

Child combinator is represented by a greater than sign (>) between parent and child elements. See the example given below to understand the difference between child and descendant selectors.

<style>
div p{ /* descendant selector */
 color:red;
 font-size:18px;
 background-color:lightgray;
}
aside > q{ /* child selector */
 background-color:lightgreen;
 color:blue;
}  
</style>
Try </>

Click on the 'try' to see the example describing difference between these two selectors.

There are also other combinators that select immediately next or following next elements of the current element. You can learn more about the selectors such as attribute selector, element selectors, pseudo elements and pseudo classes.