CODEWITHSUNDEEP
htmlcss
SDK
SDK

Reputation: 1508

How to exclude parent css style in child elements?

here I have HTML elements stacked like this,

.center-badge p {
  font-size: 12px;
}
<div class="center-badge">
  <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.

Upvotes: 2

Views: 2781

Answers (2)

KuldipKoradia
KuldipKoradia

Reputation: 3031

you have applied the global css like this I think.

p {
    font-size: 16px;
}

but once you apply css using the parent class like this way

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

it overrides your global css for <p> tag.

now <strong> has no browser default font size as <p> tag for the font-size property.

so you have to define it globally like this way

strong {
    font-size: 16px;
}

or using parent class also you can apply the css like this way.

.center-badge strong {
    font-size: 16px;
}

or you can apply it by giving the font-size: initial to the <strong> tag like this way.

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

Upvotes: 1

Quentin
Quentin

Reputation: 943108

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.

Upvotes: 2

Related Questions