While experimenting with styling in nested lists using HTML and CSS, I wanted to demonstrate the difference between the child selector (ul > li) and the general descendant selector (ul li). However, when I applied the color red to ul > li, all text in the ul ended up inheriting that color. Can someone please explain why this happens with only text properties like color, text-align, and text-decoration? Meanwhile, properties like background-color and border do not get passed down to grandchildren as they should with the child selector. Or feel free to direct me to a resource where this is explained!
Thanks in advance!
ul {
background-color: red;
}
ul li {
background-color: green;
}
ul>li {
background-color: blue;
color: red;
text-align: center;
}
ul>li>ol {
background-color: pink;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<link href="styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
</head>
<body>
<div>
<ul>
Unsorted List
<li>
First Items In Unordered List
<ol>
First Ordered List
<li>First Ordered Item</li>
<li>Second Ordered Item</li>
<li>Third Ordered Item</li>
</ol>
</li>
<li>
Second Item In Unordered List
<ol>
Second Ordered List
<li>First Ordered Item</li>
<li>Second Ordered Item</li>
<li>Third Ordered Item</li>
</ol>
</li>
<li>
Third Item In Unordered List
<ol>
Third Ordered List
<li>First Ordered Item</li>
<li>Second Ordered Item</li>
<li>Third Ordered Item</li>
</ol>
</li>
</ul>
</div>
</body>
<script src="script.js"></script>
</html>