Computer >> Computer tutorials >  >> Programming >> CSS

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 −

<!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 −

Descendant Selectors in CSS

Example

<!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 −

Descendant Selectors in CSS