Let parent CSS rule overwrite child CSS rule?

[pstein]

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

[dsonesuk]

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 September 30, 2020 by dsonesuk