CSS Child Selector (>) not working with certain properties
css, css-selectors, html
Solution
It's happening due to the default inheritance capability of certain CSS Properties. Values of these kind of properties will be transmitted to the child by default.
This document from W3C gives detailed list of inheritance in various CSS properties. Full property table
Problem
When I tried to apply certain CSS properties to direct child of a parent element using ">", it works well with some of the properties like border, but not with font-properties like color, font-weight etc.. My HTML is ``` <ul> <li>Item 1</li> <li> <ol> <li>Subitem 2A</li> <li>Subitem 2B</li> </ol> </li> </ul> ``` CASE1 CSS: ``` ul>li { color:#F00; } ``` With the above CSS code, the `color: #F00` property gets applied to all the `li` elements comes under the parent and its child. The expected was, it should be applied only to the direct child `li`s. CASE 2 CSS: ``` ul>li { border: solid 1px #000; } ``` The above code works as expected and the border gets applied only to the direct `li` child. I know this can be fixed by overriding it with another class. But wanted to know the reason why some of those CSS properties are inherited to all levels of hierarchy and others not.