The **descendant selector** matches all elements that are the descendants of a specified element. Any of the following combinators can be used in a descendant selector: a whitespace character, space, a horizontal tab, carriage return, a line feed, or a form feed. In the syntax, the first selector is the *ancestor element* and the second selector is the *descendant element*.



Look at the example below:


# Code

<!DOCTYPE html>
<html>
<head>
<style>

div h2 {
  background-color: blue;
  text-align: left;
  color: red;
}

</style>
</head>
<body>

<h2>Descendant Selector</h2>
<div>
  <h2>Hello world from div</h2>
  <h2>Hello USA from div</h2>
</div>

<h2> Outside div </h2>

</body>
</html>

codemirror

In the code above, we have written four headings using the `<h2>` tag. However, only two of them are a part of the `div`. `div h2` selects all the `h2` elements present inside the `div`.

What is the CSS descendant selector?

Code