Pixel Acres

IE7, first-child and HTML comments

Perhaps it is common knowledge, but until today I was unaware that the CSS first-child pseudo-class fails in IE7 when the child element is immediately preceeded by an HTML comment.

In the following example IE7 considers the HTML comment to be the first child, and therefore my selector will fail.

CSS:

li:first-child { font-weight:bold; }

HTML:

<ul>
    <!-- IE7 thinks this comment is the first child. Oops! -->
    <li>The li:first-child selector should make me bold</li>
    <li>I'm the second child</li>
    <li>I'm the third child</li>
</ul>

3 Responses to “IE7, first-child and HTML comments”

  1. Anders Ringqvist says:

    I also noticed this when i tried to fix white-space issues when using display: inline-block behaviour by using html comments between the end LIs and start LIs. Twittered (http://twitter.com/anddoutoi/status/849870077) about it I did.

    I think this is plain wrong as I canĀ“t imagine a time when u want to target html comments from CSS =P

  2. Kayla says:

    I never noticed that before, although I don’t use first-child much anyway. Nonetheless..I’m still getting sick of IE’s compatibility issues all the time!

  3. IE is definitely one of the most annoying software for web developers to handle! :P

Leave a Reply