Arve Bersvendsen

Descendant: Anything - Hide CSS from IE 5.5+

When I redid my other blog, I wanted to play around with shadowed boxes, using my Rounded Corners in CSS as a starting point, with some improvements suggested by Bert Bos/W3C in the Rounded corners and shadowed boxes tutorial. Sadly, this technique looks quite bad in MSIE, unless you hide the right-edge shadow. So, I had to hide it.

The technique I’m using is called Descendant: Anything and is deceptively simple

div.placeholder {
  border: 1px solid #ccc;
}



> div.placeholder {

  background: #f00 url(someimage.png) repeat-y top right

  border: none;

  border-left: 1px solid #ccc;

}

The benefit of this technique is that I can now use the div.placeholder anywhere I like, as a descendant of any element, and be sure that IE 5.5+/Windows won’t apply the rule. And all with valid HTML not relying on bizarre parsing bugs.

Update: Anne Van Kesteren pointed out that this technique will not hide CSS from IE5/Win. Thanks for the correction.