/    /  CSS Descendant Selector

CSS Descendant Selector:

 

This selector is used to match the descendant elements of a particular element.

The Descendant combinator is represented in a single space. It combines two selectors:

  • The first selector represents an ancestor.
  • The second selector represents descendants.

 

Syntax:

 

selector1 selector2 { 
 /* property declarations */ 
}

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
div p {
 background-color: lightblue;
 font-weight: bold;
}
</style>
</head>
<body>

<div>
 <p> This is 1st paragraph in the div. </p>
 <p> This is 2nd paragraph in the div. </p>
 <div>
This is second div in the first div
 <p> Paragraph in second div. It will also be affected. </p>
</div>
</div>

<p> Paragraph 4. It will not be affected because it is not in the div. </p>

</body>
</html>

 

OUTPUT:

 

CSS Descendant Selector