Cancel a CSS declaration

Question

Is it possible to have a CSS rule which basically \"undoes\" a prior rule?

An example:

    some text more text ot         


        

Answer 1

I too had this question but after I glanced at the other answers it hit me,

    body {
        color : initial;
    }

IE doesn't support this currently and Gecko requires a -moz-initial I believe..

    body {
        color : unset;
    }

This one isn't quite as supported right now. I just thought I'd share my answer to this for anyone else who thinks about this.

Answer 2

Give up and use a snippet of javascript to detect the style of the parent and set it? :)

Answer 3

Use this to make sure the inherit overrides whatever else might have been setting the color:

blockquote em {
    color: inherit !important;
}

Answer 4

With CSS alone, you can't refer to a parent's parent.

The thing you can do is try a mix of specific CSS selectors and markup so that the desired effect appears.

<td>
  This is the enclosing element.
  <ul>
    <li>This is the first level UL, direct child of TD
      <ul>
        <li>This is the second level UL</li>
        <li>Same as outside the UL</li>
      </ul>
    </li>
  </ul>
</td>

CSS:

td > ul
  color: blue; /* this affects the "direct child" UL only */
}

You would limit the depth of style inheritance to one level, consequently the inner UL is unstyled in regard to color and gets its setup from the enclosing text.

Read more on the CSS Child Selector, and be aware that older browsers may have their quirks with them.

---

EDIT

For Internet Explorer 6, the child selector can be faked to some extend. Be sure to fasten seat belts (conditional comments or the like) before using this:

td ul {
  color: expression(/TD/.test(this.parentNode.tagName)? "blue" : "black");
}

This assumes "black" as the outer color. If this color value is subject to change, your are out of luck, I'm afraid. Unless you can define an expression() that is able to get the color value from the context (e.g. checking some other properties of parent elements). Or you give up and use a JS framework, as someone else has already suggested.

The wimpy solution without having to use JS would of course be:

td ul.first {
  color: blue;
}

But I can see why you want to avoid that.

Answer 5

My CSS is a bit rusty, but this should work:

blockquote {
    color: red;
}

blockquote em {
    color: inherit;
}

You are setting blockquotes to red, but all <em>'s that are contained in a blockquote should inherit... hmmm, should they inherit from the surrounding text, or from the blockquote?

If the above does not work as you want, then there is no way to do it with the current markup, I think. You would have to work with additional markup, or set the colour explicitltly, e.g.

blockquote em {
        color: Purple;
} 

Answer 6

Ok, the additional text with example clarifies the question a lot. And I'm affraid that what you want is not possible.

If you know the "unknown colour" you can of course repeat the color. But I think CSS needs some mechanism to add variables or references.

So you have to stick to the cumbersome:

ul {
  color: blue;
}
li ul {
  color: sameenvironment;  /* Sorry but you have to add the specific colour here */
}