Can I reset a CSS property rather than overriding it?

Question

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 1

Since address:not(:last-child) and similars has 11 points of specificity, you can duplicate the classname to make it stronger. For example, the following declaration is totally valid and it has 20 points of specificity:

.mainCopy.mainCopy {      margin-bottom: 0; } 

And you must add only one mainCopy in your html:

<ul class="mainCopy"> 

Edit

Take care on the "points" of specificity, because there aren't decimal points. Them are number positions by the specificity. For example:

 address:not(:last-child) /* is 0-0-1-1 specificity (1 tagname, 1 pseudoclass) */  .mainCopy.mainCopy /* is 0-0-2-0 specificity (2 classnames) */ 

Answer 2

There exists the following property:

all: unset; 

Which I believe can be used like so:

.mainCopy {     all: unset;     margin-bottom: 0 } 

https://developer.mozilla.org/en/docs/Web/CSS/unset

EDIT: Actually I believe due to the specificity of your specific problem this may not work.