Cancel a CSS declaration

Question

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

An example:

<blockquote>
    some text <em>more text</em> other text
</blockquote>

and let's say there's this CSS:

blockquote {
    color: red;
}

...but I want the <em> to remain the normal text color (which you may not necessarily know).

Basically, would there be a way to do something like this?

blockquote em {
    color: inherit-from-blockquote's-parent
}

---

Edit: The code I'm actually trying to get this to work on is actually a bit more complicated. Maybe this would explain it better:

This text should be *some unknown colour*
<ul>
    <li>This text should be BLUE
        <ul>
            <li>Same as outside the UL</li>
            <li>Same as outside the UL</li>
        </ul>
    </li>
</ul>

ul {
    color: blue;
}
ul ul {
    color: ???;
}

Answer 1

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 2

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

blockquote em {
    color: inherit !important;
}