Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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
MOD
Mark Wilkowske
Treehouse Moderator 17,494 Points
Mark Wilkowske
Mark Wilkowske
Treehouse Moderator 17,494 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
MOD
Mark Wilkowske
Treehouse Moderator 17,494 Points
Mark Wilkowske
Mark Wilkowske
Treehouse Moderator 17,494 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,485 Points
Cindy Lea
Cindy Lea
Courses Plus Student 6,485 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.