How to make parent property not override descendants - html

Question

I am using a css file I got online for a website I'm making, but I'm only embedding some components into the website. This css file uses global styles, and they are overriding all of the global styles on my website. I figured I would just wrap the global styles and make them descendants of a class, and then make that the parent class of my component. Here's an example of what I'm saying
h1 {
color: red;
}
.text {
color: blue;
}
But now all of my h1 tags on the page end up red. I decided to wrap all the global styles and make it so only the descendants of a certain class would be affected by that style. Here's what the new css looks like
.parent-class h1 {
color: red;
}
.text {
color: blue;
}
and make my html look something like this
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
The first part actually works. My top h1 is not affected by the global css, when it was before.
But here's the problem I'm running into. Before, the text class was overriding the global h1 style, and my Hello ended up blue, while my How's it going was red. Now that h1 has been wrapped by a parent, Hello is also ending up red.
I know that the parent style appears first in the css file, so I don't think it's a question of what is being rendered first. Also, I know that everything is using classes, and not IDs, so that priority issue isn't occurring either.
I'm guessing that this is occurring because of the .parent-class h1 now has two rules while .text only has one. If that's the case, is there a way to mitigate this problem?
One thing I could do is just wrap the parent around the child, like .parent-class .text, but the css file I found online has close to 25,000 lines of code, while the global rules only had about 300, so that would be extremely time consuming, because there's thousands of classes I would need to alter.
Is there another way to fix this problem? If not, is there a way to wrap a parent rule around multiple blocks of code, in a way like this
.parent-class {
.text {
color:blue;
};
h1 {
color: red;
};
}
Or is that not possible?

Answer 1

Make sure your second selector is having the same (o higher) specifity by combining it with something else. You can for example add nth-child(n) which will not change the behavior of your selector but simply increase its specificity:
.parent-class h1 {
color: red;
}
.text:nth-child(n) {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
You can also duplicate the class:
.parent-class h1 {
color: red;
}
.text.text {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>

Answer 2

If you need to update multiple stylesheet rules loaded from another source, you can use the CSSStyleSheet API to delete and insert rules:
const styleSheet = document.styleSheets[0]
const rules = Array.from(styleSheet.cssRules).map(r => r.cssText) // get the rules texts
rules.forEach(() => styleSheet.deleteRule(0)); // remove the rules from the stylesheet
rules.forEach(cssText => styleSheet.insertRule(`.parent-class ${cssText}`)) // generate new rules with the namespace
h1 {
color: red;
}
.text {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
If you just need to exclude a single case, you can use the :not() pseudo-class to disable for the h1 elements with the class .text:
.parent-class h1:not(.text) {
color: red;
}
.text {
color: blue;
}
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>

Answer 3

just use !important like this
h1 {color: red;}
.text {color: blue !important;}