home

Netscape 4.x CSS parsing bug

The following style sheet is the only CSS used in this document:


<style type="text/css">
   div#one{color:green;}
   div#two{color:green;}
   span#three{color:green;}
   div#three{color:red;} /* shouldn't match anything */
</style>

Example 1:

<div>
  <div id="one">
    Netscape 4.x appears to get this one right, as it renders the text in green.
  </div>
</div>

Example 2:

<div id="two">
  This should also be green, but Netscape 4.x ignores the style.
</div>

Example 3:

<div>
  <span id="three">
    As if it were a DIV, Netscape 4.x displays this as red.
  </span>
</div>

What's going on here?

Apparently, Netscape 4.x interpolates white space between the type and ID selectors, interpreting the result as a descendant selector, i.e., it sees the fourth rule as div #three{color:red;}, which would match Example 3.