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.

Answer 3

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.

Answer 4

You can add another :not rule to all selectors where you want to exclude .mainCopy to have the margin

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

Answer 5

Use the universal selector * preceded by body tag.

body *.[<'className'>] {}

---

Or simply precede your class with the body tag.

body .[<'className'>] {}

---

Both are actually the same, use the one that you see fit and/or easier to spot for maintenance.

---

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;
  color: red;
}
body *.mainCopy {
  margin-bottom: 0;
  color: green;
}

<main>
  <p class="mainCopy">p</p>
  <p>p</p>
  <ul>
    <li class="mainCopy">
      li
    </li>
    <li>
      li
    </li>
  </ul>
  <code>body *.mainCopy {}</code>
</main>

---

If you're paranoid, you can even use:

html .[<'className'>] {}

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;
  color: red;
}
html .mainCopy {
  margin-bottom: 0;
  color: green;
}

<main>
  <p class="mainCopy">p</p>
  <p>p</p>
  <ul>
    <li class="mainCopy">
      li
    </li>
    <li>
      li
    </li>
  </ul>
  <code>html .mainCopy {}</code>
</main>

Answer 6

I tend to go with initial as a property value.

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: initial}