Descendant Selectors in CSS


The CSS element selector is used to select the descendant of first element with element name matching the second selector.

Syntax

The syntax for CSS descendant selector is as follows −

element element {
   /*declarations*/
}

Example

The following examples illustrate CSS descendant selector −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   float: right;
   margin: 25px;
   padding: 5px;
   width: 80px;
   height: 80px;
   border: solid aqua;
}
div div {
   border-color: blue;
   border-radius: 50%;
}
div div div {
   border-color: orange;
   border-radius: unset;
}
</style>
</head>
<body>
<div>
<div>
<div>
</div>
</div>
</div>
</body>
</html>

Output

This gives the following output −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
li li {
   background-color: lightsteelblue;
}
</style>
</head>
<body>
<ol>
<li></li>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
<li></li>
</ol>
</body>
</html>

Output

This gives the following output −

Updated on: 08-Jan-2020

222 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements