While experimenting with applying CSS properties to direct child elements of a parent element using ">", I noticed that it works smoothly with certain properties like borders, but not so much with font-related properties such as color and font-weight.
Here is the HTML structure I was working with:
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>CASE1 CSS:
ul>li {
color:#F00;
}In this case, the color: #F00 property is applied to all li elements under the parent, including both direct children and nested ones. The expectation was for it to only affect the direct child lis.
CASE 2 CSS:
ul>li {
border: solid 1px #000;
}The above code behaves as anticipated, applying the border exclusively to the direct child li elements.
I understand that this issue can be resolved by overriding the styles with another class. However, I am curious about why certain CSS properties are inherited throughout all levels of hierarchy while others are not.