Correct CSS inheritance behavior for properties that aren't inherited?

Question

So say we you have a CSS property that is not inherited by default. We'll call it "foo" and its default value is "black". Then we make the following html.

<div id="div1" style="foo: red;">
 <div id="div2">
   <div id="div3" style="foo: inherit;">
   </div>
 </div>
</div>

Since this property does not inherit by default, you'd think that in div2, "foo" must be "black" - the default value because it does not inherit by default.

But ... in div3 should the value for "foo" inherit "black" from its parent that did not inherit foo, or should it inherit "red" from its grandparent because its parent did not specify foo?

I need to know because I'm trying to implement something exactly to the spec.

ChrisW · Accepted Answer · 2010-05-24 22:15:44Z

3

It inherits its parent's (not grandparent's) computed value: http://www.w3.org/TR/CSS2/cascade.html

answered May 24, 2010 at 22:15

ChrisW

56.4k14 gold badges125 silver badges236 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Over a year ago

Thanks for the reference to the spec!

x1a4 · Accepted Answer · 2010-05-24 22:20:09Z

2

div3 will inherit from div2, so its foo will be black. inheritance is from the parent.

answered May 24, 2010 at 22:20

x1a4

19.5k5 gold badges42 silver badges40 bronze badges

Collectives™ on Stack Overflow

Correct CSS inheritance behavior for properties that aren't inherited?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related