Jump to content

Let parent CSS rule overwrite child CSS rule?


pstein
 Share

Recommended Posts

Normally a more specific CSS rule has priority over the more general rule e.g.

<header class="foobar">                              //width=1200px
<div>
  <P>  ....</P>                                       //width=860px;
</div>
</header>

But is there a way to let a parent element force to recursively overwrite all nested child CSS rules?

In the sample above the header width instruction should overwrite the inner P width instruction.

In general all nested width instructions should be overwritten.

If a nested element has no width instruction nothing should happen.

How can I write such a CSS (or javascript?) instruction?

Advanced related question:

How can I restrict the width instruction to only childs (=next lower hierarchy level)?

Peter

Link to comment
Share on other sites

Err? parent width override child width, no it wouldn't unless child has width inherit. Width is not one of those properties that carries on down to children unlike font-size for instance.

Being a block element the div and p element would fill the total width of parent (the div header width, the paragraph the div width), if that is what you are getting? Inline element width is determined by content.

.foobar > div > p{

width: 860px;

}

Should be fine

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...