here I have HTML elements stacked like this,

.center-badge p {
  font-size: 12px;
}

<div >
  <div>
    <p>Get a</p>
    <p><strong>2% rate reduction</strong></p>
    <p>with a</p>
    <p>co-applicant</p>
  </div>
</div>

and I have added the font size as 12px for the center-badge CSS. In this, we need to exclude the strong tag with p. Only the 12px styling has to apply all the p tags but a strong tag.

We have added a global styling for the p as 16px. How to exclude a particular element to not apply the parent CSS.

Is any way to solve this. can we can use the :not() for this scenario.

CodePudding user response：

Well, initial property value seems to have an effect on the font size.

body {
  font-size: 16px;
}

.center-badge p {
  font-size: 12px;
}
strong {
  font-size: initial;
}

<div >
  <div>
    <p>Get a</p>
    <p><strong>2% rate reduction</strong></p>
    <p>with a</p>
    <p>co-applicant</p>
  </div>
</div>

CodePudding user response：

If an element has font-size: inherit or font-size: someUnitRelativeToTheParent — and it doesn't matter if that is set explicitly or by the browser stylesheet — then you can't make it not base the font-size on that of the parent element.

Likewise there is no way to write a selector with a condition "Unless the element's children include X" to avoid applying the font-size in that particular p in the first place.

You can either:

• Explicitly style the strong element with a font-size that uses absolute units or
• Change the DOM in such a way that you can exclude the p (e.g. by adding a class to it and adding :not(.that_class) to the stylesheet.