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

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.

  This is the enclosing element.
  

    
This is the first level UL, direct child of TD
      

        
This is the second level UL
        
Same as outside the UL
      
    
  

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.