How to overwrite all more special CSS rules inside an element?

[pstein]

Lets start with an example:

<div class="aaa bbb" ...>
  <p class="ccc" ....> firsttext </p>
</div>
<div class="aaa ddd" ...>
  <p class="eee"> secondtext </p>
</div>

and the corresponding CSS rules:

.ccc { font-size: 18px; line-height: 18px };
.eee { font-size: 25px; line-height: 25px };

As far as I understand more special CSS rules (inside an element) overwrite always the more general CSS rules of the enclosing element.

So if I define

.aaa { font-size: 14px; line-height: 14px; };

then the .ccc and .eee rules win.

Is there a way to overcome this priority rule hierachy so that all more special CSS rules inside are overwritten anyway by the outer CSS rule?

"!important" does not work since it overwrites only possibly existing rules for the same class. So

.aaa { font-size: 12px !important; line-height: 12px !important; };

only overwrites only the old .aaa rule but not the rules inside.

 

However I could imagine that there is an option to brutally overwrite all every more special rule inside an element.

How can I achieve this?

Peter

Edited October 17, 2016 by pstein

[Ingolme]

You have to target that element rather than one of its ancestors. In your case, since they're both <p> elements .aaa p would work as a selector.