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 thoughts on “IE7, first-child and HTML comments”

  1. Anders Ringqvist says:
    December 1, 2008 at 8:56 am

    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:
    December 20, 2008 at 11:07 pm

    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. Anubis From Memphis says:
    February 16, 2009 at 1:37 pm

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

Comments are closed.