Forcing ignore Children css

Question

I have this case:

firstCSSPage.css

.wrong-parent{
   font-size: 10px;
}

.wrong-child{
   font-size: 5px;
}

secondCSSPage.css

.parent {
   font-size: 20px;
}

.html

<div class="parent">
   <div class="wrong-parent">
      <span class="wrong-child">
         Text test target.
      </span>
   </div>
   <div class="wrong-parent">
      <span class="wrong-child">
         Text test target seconde.
      </span>
   </div>
</div>

I can't change the .html and firstCSSPage.css
Can I find a way to force all text in the spans to ignore the wrong-parent and wrong-child css ?

`.parent > div.wrong-parent > span.wrong-child { font-size: 20px; }` ? — Dai, Feb 14 '22 at 15:10
Add more specific selector than in `firstCSSPage.css` and you good to go — Justinas, Feb 14 '22 at 15:11
@Justinas : I can't modify firstCSSPage.css the .html, only secondCSSPage.css — alex alias, Feb 14 '22 at 15:42
@alexalias Yes, so in second page add `.parent .wrong-parent {font-size: 20px}` — Justinas, Feb 14 '22 at 15:46

score -2 · Answer 1 · answered Feb 14 '22 at 15:18

-2

Rewrite Same class in secondCSSPage.css

.wrong-parent{ font-size: unset !important; }

.wrong-child{ font-size: unset !important; }

answered Feb 14 '22 at 15:18

shabeer_bin_khalid

1
1
2

1

The `!important` keyword should be avoided: https://stackoverflow.com/Questions/3427766/should-i-avoid-using-important-in-css https://uxengineer.com/css-specificity-avoid-important-css/ – Dai Feb 14 '22 at 16:58

Forcing ignore Children css

1 Answers1