Descendant: Anything – Hide CSS from IE 5.5+

When I redid “my other blog”:http://antibiomatika.net/, I wanted to play around with shadowed boxes, using my “Rounded Corners in CSS”:http://virtuelvis.com/gallery/css/rounded/ as a starting point, with some improvements suggested by Bert Bos/W3C in the “Rounded corners and shadowed boxes”:http://www.w3.org/Style/Examples/007/roundshadow.html 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
bc.. div.placeholder {
border: 1px solid #ccc;
}
* > div.placeholder {
background: #f00 url(someimage.png) repeat-y top right
border: none;
border-left: 1px solid #ccc;
}
p. 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”:http://annevankesteren.nl/ pointed out that this technique will “not hide CSS from IE5/Win”:http://virtuelvis.com/archives/2004/03/descendant-anything#cid392. Thanks for the correction.

2 Comments

  1. Have you tested this in WinIE5.0? I guess not…

  2. Hm. I hadn’t tested. Now I have, and have corrected the entry. Thank you.