Liran H Liran H - 14 days ago 5
CSS Question

Can I reset a CSS property rather than overriding it?

The webpage I'm working on already has some base stylesheets, one of which contains this rule:

address:not(:last-child),
fieldset:not(:last-child),
li:not(:last-child),
ol:not(:last-child),
p:not(:last-child),
table:not(:last-child),
ul:not(:last-child) {margin-bottom: 12px}


This is applying the 12px margin-bottom on my
<p class="mainCopy">
tags, which I'm not interested in. I want to be able to override it with
.mainCopy {margin-bottom: 0}
, but obviously the base rule is more specific than my rule. This forces me to make a rule that's more specific than I want or need, such as
p.mainCopy
. Moreover, I sometimes need to have
<li class="mainCopy">
, and this would force me to add a second rule, to cater for the
<li>
as well.

Is there any way I can simply reset this property, or revert the problematic CSS declaration?

Answer

To answer your question (rather than solving your problem)...

Can I reset a CSS property rather than overriding it?

Reset to what?

The C in CSS stands for cascading and you'll always have several layers of styles combining among themselves with precisely defined though not always immediately clear rules. Apart from the styles set by the site author in different places (external CSS files, <style> blocks, style="" attributes...), in the base line we'll find the builtin browser styles and as far as I know browser vendors are free to assign whatever default styles they choose—and often users can add their own styles to the soup, either with builtin settings or with add-ons. Even the so called CSS resets don't actually reset anything. They merely add yet another layer of styles on top of the rest.

There's no syntax for "Create a snapshot here" (which would be the only solution I can think of without a thorough analysis) so the answer is basically no.