CSS Inheritance not working as expected

Question

So I have html and css that looks like the following..

    <div id="foo">
        <p> Foo text </p>
        <div id="bar">
            <p> Bar text </p>
        </div>
    </div>

And then I have some css that looks like the following...

    #foo p {
    text-align:left;
    font-family: helvetica, verdana, sans;
    font-size: 14px;
    color: #000000;
    padding: 10px 10px 10px 10px;
    margin: 0px 0px 0px 0px;
    }
    #bar p {
    font-size: 12px;
    color: #ffffff;
    padding: 0px 0px 0px 0px;
    }

So isn't the point of CSS to override the styles applied to the child from the parent foo? It's not doing this, I just get the child styles overridden by the parent. I'm clearly missing something big here, any help would be great.

Unless I've misunderstood your question, it seems to work fine for me: jsfiddle.net/interdream/sYMdR — James Allardice
– James Allardice, Commented Jun 26, 2011 at 22:39
What is your problem specifically? Padding, color and font-size must definitely be different in #bar p. is this what is not working? — Mo Valipour
– Mo Valipour, Commented Jun 26, 2011 at 22:39
if you expect other styles (i.e. margin, font-family, etc.) to be reset as well you are wrong, you need to say: margin:inherit for that — Mo Valipour
– Mo Valipour, Commented Jun 26, 2011 at 22:41
Overriding of rules in CSS has nothing to do with parent/child element relationships. — BoltClock
– BoltClock, Commented Jun 26, 2011 at 23:26

AlexanderJohannesen · Accepted Answer · 2011-06-26 23:24:04Z

4

I think you're confused, or have coded yourself blind. :) What you have works perfectly well, it is your intentions that I suspect is off. What you're thinking is that the first set of styles should be inherited and then overwritten by the second, but if you look to your HTML, that's not the structure you've put in place.

You're saying #foo's <p>'s should have the first style, but the second set of styles are in a <div>, and hence not applied. The second p is in a <div>, and hence will not have the first rules which are for elements under a <p>.

If you want the styles to inherit, wrap your <div> into your <p> (even though structurally not good, nor valid in a number of schemas);

<div id="foo">
        <p> Foo text 
        <div id="bar">
            <p> Bar text </p>
        </div>
    </p>
</div>

I'm not sure what you're trying to do, though, so it's a bit hard to come up with good examples to solve your problem. :)

answered Jun 26, 2011 at 23:24

AlexanderJohannesen

2,0342 gold badges14 silver badges28 bronze badges

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

1 Comment

Ahmad Alfy Over a year ago

I totally can't understand what you're aiming for but we don't know what he mean either :) I will keep an eye on the conversation!

Ahmad Alfy · Accepted Answer · 2011-06-26 23:34:27Z

-1

Look Chris you're misunderstanding CSS selectors and their inheritance ...

Nothing will explain it better than this presentation by Russ Weakly

CSS Cascade

answered Jun 26, 2011 at 23:34

Ahmad Alfy

13.4k6 gold badges70 silver badges105 bronze badges

Collectives™ on Stack Overflow

CSS Inheritance not working as expected

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