Descendant Selectors in CSS

CSSWeb DevelopmentFront End Technology

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 −

raja
Published on 08-Jan-2020 12:11:44
Advertisements