Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Edward Ulick
Edward Ulick
2,756 Points

Inheritance of display property

Why don't the <li> elements inherit display: inline from ".main-nav"?

The following CSS leaves them as block elements: .main-nav { display: inline; }

I think I'm confusing something about inheritance.

Claudio Gomes
Claudio Gomes
8,872 Points
Claudio Gomes
Claudio Gomes
8,872 Points

Hi Edward,

display is a property which not inherited in CSS

Inheritance in CSS is the mechanism through which certain properties are passed on from a parent element down to its children. (...) Not all CSS properties are inherited, because it doesn’t make sense for some of them to be. For instance, margins are not inherited, since it’s unlikely that a child element should need the same margins as its parent. In most cases common sense will tell you which properties are inherited and which aren’t, but to be really sure you need to look up each property in the https://www.w3.org/TR/CSS21/propidx.html

extracted from https://www.w3.org/wiki/Inheritance_and_cascade

3 Answers

Mark Wilkowske
PLUS
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

Ok I understand now. Never thought of it that way so I set up a codepen to test my theory and I'd say no inheritance because <li>s and <ul>s are block elements and <li>s nest inside <ul>s. Color and font size, for example, inherit but not display.

https://codepen.io/theVulture/pen/OXMjJp

Mark Wilkowske
PLUS
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

Hey Edward, it might be how you are 'reading' selectors.

If I try this in the workspace .main-nav {display:inline;} I can see the <li>s display doesn't change only because that selector isn't actually targeting/selecting the <li>s.

To do that we need .main-nav li { display: inline} and the way to read this selector is: <li>s inside an element that has the class main-nav should display inline.

Edward Ulick
Edward Ulick
2,756 Points

Hi Mark, thanks for your reply. What I was wondering was not how to target the <li>s, but why they don't inherit the display property from their parent element, the <ul> with the class "main-nav"? So when I set the display property of "main-nav" to inline, why don't the <li>s inherit that? Instead they remain block-level elements, and don't inherit the display property from their parent element. Am I missing something about inheritance? I thought child elements always inherit properties from their parent element.

Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,497 Points
Cindy Lea
Cindy Lea
Courses Plus Student 6,497 Points

It only affects the li that is in the main-nav section & nowhere else. There may be li sections in several classes, but each class's code will only affect the area specified by that class.