Remove normalize css for particular div block

Question

I have a normalize css for my existing website as below

p {
  font-family: Times new roman;
}

I have a new HTML component which cannot be changed as below

.abc {
  font-family:Helvetica;
}
<div class="abc">
  <p>abcdef</p>
</div>

When I integrate the new HTML component with my existing website the paragraph takes Times new roman. But my requirement is to show it as helvetica. I am in a critical challenge that I cannot change the existing website and the new component css.

I tried to write new css as below and it worked

.abc p {
   font-family: Helvetica;
}

But the problem is whenever the HTML component css changes I have to rewrite my css code. Is their any way to avoid existing normalize css only for the new HTML component block.

Answer 1

Try this:

.abc, .abc * {
    font-family: Helvetica !important;
}

Answer 2

how about this:

.abc p {
    font-family: inherit !important;
}

That will cause the paragraph inside .abc to inherit whatever font-family was declared for .abc, without declaring a specific font that may need to be changed. You can also adapt this to any element that might be inside .abc.