CODEWITHSUNDEEP
csshtmlparent
Gus
Gus

Reputation: 1923

Ignore element wrapper's CSS

Let's say I have two divs like this:

<div name="parent" style="color:blue;padding:5px">
  <div name="child" style="background:red">
    Text that ignores color:blue and padding:5px, but still obeys background:red.
  </div>
</div>

I want the text in the div named child to ignore all css that is not defined by child. I know I can do this by defining every css option available to default, but that would be very bulky for my current project. I don't want to use iframes either. How can I do this? Thanks.

Upvotes: 0

Views: 2681

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114447

The "C" in CSS = "cascading", which means elements inherit properties from their parents.

You might be able to write some script to help automate this, but you really do need to overwrite the parent's properties. That's the way CSS works.

P.S. you should be using IDs and classes, not "name".

Upvotes: 2

thirtydot
thirtydot

Reputation: 228302

I know I can do this by defining every css option available to default, but that would be very bulky for my current project.

Unfortunately for you, that's what has to be done:

<div name="parent" style="color:blue;padding:5px">
  <div name="child" style="background:red;color:#000">
    Text that ignores color:blue and padding:5px, but still obeys background:red.
  </div>
</div>

padding is not inheritable, so you don't need to reset that. Check the "Inherited" column here to see which you need to reset: http://www.w3.org/TR/CSS21/propidx.html

Upvotes: 1

Related Questions