This issue was fixed in Internet Explorer 7 beta 2.
A useful CSS component. It allows you to target a tag only if it is the first tag within its container. The first cell in a table row, the first row in a table. The first tag in a DIV, be it a paragraph or heading. Sounds simple enough. And it has been in the CSS 2 standard since before IE 5.
Why would it be useful? What if you want to write a series of links, and separate them all with red lines. Say (for
the sake of simplicity) you put them all in a paragraph together. So you give them all a left border:
#paragraphID a { border-left: 2px solid red; }
Ok, that's great, but now you have an extra border to the left of the first link as well, and there shouldn't be one there.
so you use the :first-child pseudo class:
#paragraphID a:first-child { border-left-width: 0px; }
Now no matter what links you put in what order, it will always get it right.
Oh, but not in IE. Of course not. Why would we need that? We can add a class to the first link, and target that instead. Then we add a link, and we need to put the class on the new first one, or we re-arrange them. Or how about this scenario. We have a table. A big table. We want to colour the text in the first cell of every row orange. Well, with the way that IE forces us to do this, we would need a class attribute in the first cell in every row. Hundreds of rows, hundreds of extra class attributes, significantly bloating the document, and making it very awkward to maintain. Using the :first-child pseudo class, this would be a single line in the CSS.
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
| Row 3, Cell 1 | Row 3, Cell 2 | Row 3, Cell 3 |
Workaround: Use class attributes in the element that would be the first child, and target that instead - the extra HTML required is an unfortunate side effect.