I would like to understand how the first level descendant selector (>) works.
Targets look different for border compared to color property
I think what you are referring to is why the color of nested <li> elements changed to green as well even though we specified the first-level descendant selector (>) in the CSS to target the direct children of a parent and why the border is only targeting the direct <li> elements.
The reason is that first level descendant selector (>) only targets the direct children of a parent like a border in this example which is correct but the color is inherited property that means elements will inherit color from their parent element that’s why the color of nested <li> elements is also green because they inherit it from the parent which is the second direct <li> element in the case. The border on the other hand is not inherited property.
I hope this explains your question.
1 Like