jQuery - disable :not selector CSS

Question

There's a certain CSS property that I want to remove, but I can't because it is auto-generated by a backend engine called Pelican.

.rendered_html ul:not(.list-inline) {
    padding-left: 2em;
}

I want to remove this property, but I don't know how. Here's the screenshot

In a Chrome developer tool, if I uncheck that property, it works fine, but if I leave it as it is, it looks bad. And the thing I don't understand is that both appear as greyed out in chrome developer tool, and yet they seem to have effects on the CSS property. To my understanding, if the properties are greyed out, they should not have any effects, but in this case they do.

I tried doing this:

.rendered_html ul:not(.list-inline) {
    padding-left: unset !important;
}

But this is not what I want because I want it, because I also want to add this property:

ul.ascii {
    padding: 1rem;
}

Unsetting the padding by adding additional CSS codes in my .css file will prevent me from applying padding: 1rem property.

How can I nullify the css proprety of .rendered_html ul:not(.list-inline) ?

Answer 1

not ideal, but

.rendered_html ul:not(.list-inline) {
    padding-left: 0 !important;
}

.rendered_html ul.ascii {
    padding: 1rem !important;
}

will likely solve your problem.

the adding of the extra step .rendered_html on the second instruction gives it the same specificity hierarchy as the first one, so it wont be ignored.

you might not need !important depending on .css loading order, so try to change that too.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity