CSS CSS Layout Basics Controlling Layout with CSS Display Modes Positioning Elements Side-By-Side with Inline Display

why is targeting .main-nav does not change the display of .main-nav li (its child element)

my question is why targeting .main-nav with display: inline; does not have any effect on its child element .main-nav li

in the video the code is shown as below

.name,
.main-nav,
.main-nav li{
display: inline;
}

If someone tries to omit the .main-nav li, the list elements will show as block element

1 Answer

Steven Parker
Steven Parker
203,990 Points

CSS selectors are always specific and never include child elements of the one(s) selected.

You might be thinking of inheritance. Some properties of a parent element are inherited by their child elements, but whether a property is inherited or not depends on the particular property. A reference like MDN can be consulted to check if a specific property is inherited.

The display property being set in this particular rule is not inherited.