How to solve :first-child CSS bug in IE 7

Yesterday, IE 7, once again, pushed me to the brink of going postal. Refusing to give up, I finally managed to find the problem.

Background

I was creating a top menu for a web site I was working on, and it needed some special styling for each first item, i.e. the first LI, and other styling for all others. Since it’s a controlled environment, IE 6 doesn’t need to be supported (Yay!); hence I thought I’d be using some cool CSS to solve it, as opposed to riddling the HTML code with classes.

Let’s look at my (somewhat :-) ) simplified example:

HTML code

<ul>
    <!-- First item is special -->
    <li>
        <a href="/">Start page</a>
    </li>
    <li>
        <a href="/">News</a>
    </li>
    <li>
        <a href="/">Contact</a>
    </li>
</ul>

CSS code

li {
    background: red;
}
li:first-child {
    background: blue;
}

The problem

No matter how I tweaked and changed my code, the :first-child CSS pseudo selector would not work in IE 7. Naturally, Microsoft claims it does support it, and, while going mental, I was trying to figure out whether it was just another crappy implementation that doesn’t work at all, or if there was something weird with my code.

The solution!

After pulling my last beard hair from my face, it dawned upon me! The key was the HTML comment preceding the first LI item, incorrectly interpreted by IE to be the first child element of the UL. In my defense, the HTML comment wasn’t written by me and yes, it could be in another place… :-)

Still, it’s a horrendous bug, and therefore I wanted to warn you! Be very careful about where you put your HTML comments, because the possible results will mess with your mind.

Posted in CSS,Developing,Technology,Web browsers |

70 Comments

  • Pete B says:

    I guess it’s like IE’s jscript engine, which thinks comment nodes and HTML elements are the same thing :(

  • Ole says:

    HTML Comments in IE must be set carefully. They can also produce the weird “Duplicate character bug” which is described here:

    http://www.positioniseverything.net/explorer/dup-characters.html

  • kimblim says:

    I'm actually not that surprised to see this bug/feature. My best guess would be that IE has to interpret comments as elements for conditional comments to work? Still, I don't think it's a big bug, and it's relatively simple to work around.

    Did you try IE8 to see if it still works in the same way?

  • Wow, that's an amazing oversight!

    But, at least it'll be consistent across many future versions, as it'll also be in IE7 compatability mode for many versions to come, unless they decide not to do bug for bug compatability mode ;-)

  • Would not have used the heading "How to solve…" and neither state that I come up with a solution =P There is no solution. IE7 needs to be patched, that is the solution. Moving the HTML comment aint a solution on the problem. There might be cases where there might be a comment there and you can´t do anything about it. There might be times you need a comment there, white-space suppression anyone?

    Just state that there is a problem with the :first-child pseudo-class in IE7 but please don´t say you found a solution, it´s missleading. It´s "sensationsjournalistik" at it´s best.

  • Robert Nyman says:

    kimblim,

    Yes, it's probably related to conditional comments in some sort of way. I'd still deem it serious, though, in all kinds of CSS code where relations and placement of HTML elements is deciding applied styles.

    Haven't tried IE 8 with it yet.

    Morgan,

    Yes, wonder if their IE 7 mode in future versions will have bug fixes. Probably not, I presume.

    Pete,

    Yeah, most likely.

    Ole,

    Ah, yes, that one is bad too.

    Anders,

    Since it solves the problem for me, and for a majority of other stumbling upon it, I would definitely say it deserves the epithet "How to solve…". With web development in general, help articles and so on, it is about how you as a developer can solve the problem you're facing, extend the web browser to encompass differences etc.

    Of course the core problems in IE has to be fixed, but that is up to Microsoft. So, if you find "How to solve…" as a headline to be "sensational journalism", at best, you haven't seen much of that… :-)

  • I ran into this yesterday! The swearing fit both before it was figured out and after was pretty fun… It is amazing/scary how you have to think like a browser to figure out odd little things like this. Thanks for posting this!

    I am happily on a "no IE6 supported" project as well… feels good. ;)

  • So very typical of MS. To implement a feature almost all the way…

  • This problem of IE 7 treating comments as elements for the purpose of applying CSS came up on the css-discuss mailing list when the browser was still in beta. As Ingo Chao pointed out, comments can even be made to react to <code>:hover</code> :-)

  • mdmadph says:

    @Christopher Papastefanou

    Wouldn't you say that this time they implemented it, but then went too far? They do that just about as often. :(

  • Cerebral says:

    I knew it directly when I saw your code :p

    You need to meet this once to be able to avoid it forever: like mentionned before, HTML comments in IE are dangerous. Another place to avoid them is before the doctype, it would jump into Quirks Mode.

  • Robert Nyman says:

    Jesse,

    Yes, it's all about getting into the mind of IE. :-)

    And congrats for no IE 6 for you!

    Christopher, mdmadph,

    Yeah, not all the way, or too much. Still, jsut plain wrong…

    Nick,

    Great, thanks for the link!

    Cerebral,

    Yeah, me too. I had an enormous file, but when I broke it down to the above, I saw it too. :-)

  • Chris says:

    Some versions of IE are also known for being very nitpicking with whitespaces. And having a comment before doctype triggers quirks mode. So the fact that a comment counts as an element is stupid but fits in the scheme…

  • Olly Hodgson says:

    Be very careful about where you put your HTML comments, because the possible results will mess with your mind.

    This is good advice when working with IE6, too. Any comment or other hidden element (hidden inputs for example) can trigger the duplicated characters bug.

    Of course, sometimes you don't need any hidden elements to trigger it. You just need IE6 to fail miserably at adding up. None of the usual fixes worked, hence I nearly went postal yesterday. In the end some voodoo magic (involving the magic number 3 and overflow: hidden; on an element several branches up the tree) made the problem go away. GAAAH!

  • chovy says:

    The comment IS the first child of UL.

    Coment tags are still part of the DOM, simply because they are invisible in the rendered view of the browser doesn't mean they aren't there.

    I fail to see how this is "incorrectly interpreted by IE".

  • @chovy: Comments might be part of the DOM, but that is a different specification to CSS, and the terms "first child" has different meanings in the two specifications.

    CSS 2.1 states that the adjacent sibling selectors should ignore <q cite="http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors">non-element nodes (such as text nodes and comments)</q>.

    Although :first-child is a pseudo-class rather than an adjacent sibling selector, its definition also refers explicitly to elements and thus also excludes comments.

  • Robert Nyman says:

    Chris,

    Yes, whitespace can cause enormous problems, and don't even think about preceding the doctype with anything.

    Olly,

    Good to see that we share the potential of going postal. :-)

    chovy,

    Nick's comments explains it. Also, I'd like to add that, opposed to, for instance, hidden form elements, HTML comments have no rendering, no styling, no script access, no values posted.

    Hence, it's rather just page information than page content, in my mind, and should therefore not be treated like a child element.

    Ingo,

    Thanks for sharing!

    Nick,

    You took the words right out of my mouth. :-)

  • [...] dia que passa fico conhecendo mais um bug novo no Internet Explorer. Já ouviram falar do bug de first-child no IE7? O curioso problema que ocorre é o seguinte. Observem a seguinte marcação [...]

  • Richard Hamilton says:

    Thank you very much for posting this. I had an exactly similar problem where the class was correctly applied in Firefox but applied one level further down the DOM in IE7. I concluded that it was a bug and searched accordingly. Your article immediately cleared up the problem.

    Thank you.

    Regards

    Richard

  • Robert Nyman says:

    Richard,

    Glad that it was of help to you!

  • [...] How to solve :first-child CSS bug in IE 7 [...]

  • Martin says:

    Funny to read that some people think that it's a bug in IE7 :)

    The only situation when the first-child selector does not work is when you forget to use a doctype. Just use valid (x)HTML-code and there's no problem at all.

  • Robert Nyman says:

    Martin,

    It is a bug in IE 7. Naturally, this has been tested with strict HTML and XHTML doctypes, and it, in my mind, incorrectly parses the HTML comment as the first-child. Nothing that is invisible should be affected by presentation code, i.e. CSS.

  • Martin says:

    I'm sorry, in my hurry I read your post the wrong way. I thought you said that IE7 does not support :first-child, but it was about the HTML-comment that confuses IE7. That's indeed strange behavior, good to know ;) Thanks.

  • Robert Nyman says:

    Martin,

    No worries. :-)

  • I had the same problem in one of my html sliced documents.

    I have spent a lot of time on looking why IE7 gives me this bugs:

    – ignores auto margins;

    – first-class selectors.

    I've checked the document many times, every class and every element, but it was clear and the W3 Validator said the document is valid and he marked it with a green color as usually.

    Than I decided to remove commented text, which was placed in my html document before this line:

    <code><!DOCTYPE html…</code>

    This text just include document information, such as:

    <cite><!– filename: index.html; author: author's name… –></cite>

    When I removed this comment, all the IE7 bugs disappeared!

    My mistake was here: I forgot, that comments marked <– … –> is only html document comments and they should be placed only inside <html> tag.

  • Stefan says:

    Robert, you saved my beard. Thank you!!!

  • Abdullah says:

    Man, I wanna kiss you :D :D. I would have probably wasted my whole day to figure out what the hell is happening, but thanks God I found your post. You saved my hours. Thanks a lot :)

  • Robert Nyman says:

    Abdullah,

    Great to hear that it helped out!

  • Martin says:

    Thanks for this post. Only took me five minutes to figure out what the heck was up. Without the post, I probably would have ended up banging my head against the wall.

  • Robert Nyman says:

    Martin,

    You're welcome!

  • abcd says:

    Untitled Document

    li:first-child{color: green;}

    li:last-child{color: red;}

    li:target{color:green;}

    li:last-child:hover{color: orange;}

    a:hover{color: yellow;}

    First

    Second

    Third

    <!– last item is special –>

    Last

    check this code there is no any comments in this code bur still last child and first child is not working ie 7

  • abcd says:

    <html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Untitled Document</title>

    <style type="text/css">

    li:first-child{color: green;}

    li:last-child{color: red;}

    li:target{color:green;}

    li:last-child:hover{color: orange;}

    a:hover{color: yellow;}

    </style>

    </head>

    <body>

    First

    Second

    Third

    <li title="last">Last

    </body>

    </html>

    check this code there is no any comments in this code bur still last child and first child is not working ie 7

  • Robert Nyman says:

    abcd,

    The CSS pseudo-properties <code>:last-child</code> and <code>:target</code> aren't supported by IE7, but <code>:first-child</code> really should work for you in that example. Try stripping out all the other CSS and see if it works.

  • abcd says:

    yes i checked it's not working in IE7

  • abcd says:

    is there any idea other than first child and last child

  • Robert Nyman says:

    abcd,

    Nope, that is all I can think of.

  • @abcd

    I know your post is a couple months old but your code probably isn't working because the first child has an <a> tag in there. You have to explicitly set the color on <a> tags so your css would have to be something like: li:first-child a { color: green; }

    :)

  • gexplorer says:

    I've tested the code of the example and it doesn't work on IE7. Can you test it again now? The version of the IE7 might be different (7.0.5730.13)

  • Kris says:

    How can I target the first paragraph in a div when a different tag precedes the first paragraph? For example:

    <code>

    <div>

    <img src="" />

    I want to target this paragraph.

    Second paragraph

    </div>

    </code>

    If I remove the image tag, div p:first-child works, but with the tag there, it seems to find the image as the first child.

  • Robert Nyman says:

    gexplorer,

    Not sure what version it was, but it might have been fixe din a minor update then.

    Kris,

    You could do it with a CSS3 selector, but they are only supported in the latest versions of various web browsers.

  • dravidian7 says:

    i can’t believe that would cause that, but it works! thanks. Ie8 has same problem.

  • Robert Nyman says:

    dravidian7,

    Glad it helped!

  • Angel D. says:

    Thanks to IE I now have not one but five imaginary friends. They are all hot elves FYI. Madness isn’t as bad as people make it sound i guess….

    This post saved me (*us –> cant forget the hot elves) today. Thanx!

  • Robert Nyman says:

    Angel,

    Ha ha! :-)
    Whatever solves the problem right? :-)

  • Thanks, solved my problem 2 years later!

  • Robert Nyman says:

    Web Design Scotland,

    Glad it was of use. :-)

  • alexandria says:

    hi,
    I was near to give up, thanks for this very useful post, you saved me !

    regards

  • Robert Nyman says:

    alexandria,

    Glad it helped!

  • Steven says:

    Thanks for that… would never have thought of that…

  • Robert Nyman says:

    Steven,

    Glad it was of help!

  • MoiKano says:

    Hi,

    if needed, it is possible to bypass this bug using conditional comment:

    it isn’t so pretty, but functional :)

  • MoiKano says:

    … sorry, I didn’t escape the html :P

    this was the example:
    <!--[if !IE]> this is a comment <![endif]-->

    :)

  • Robert Nyman says:

    MoiKano,

    Ha, cool idea!

  • ArnaudBan says:

    Thank you very mutch ! Perfect !
    I would have never find it myself…

  • Robert Nyman says:

    ArnaudBan,

    Glad to help!

  • Dave says:

    Hi Robert,

    I realize this is an older post, but just wanted to mention that I was working on a project using some of the Twitter Bootstrap framework, and was having an issue with a “first-child” row not lining up with some other content in ie7; Did a search for first-child + ie7 and your article came up.

    The problem was indeed a comment on the proceeding closing div, and removing it solved the issue.

    As a hobbyist coder, I would have never figured it out on my own.

    A big thanks for posting this.

  • Robert Nyman says:

    Dave,

    Good to hear, and glad it was helpful!

  • Jonas says:

    thank you so much for saving my beard-hair! :) I usually now always drop ie7-support of my websites while i have choice, but sometimes i have no choice :/

  • Robert Nyman says:

    Jonas,

    Good to hear. :-)

  • [...] ??? http://robertnyman.com/2009/02/04/how-to-solve-first-child-css-bug-in-ie-7/ [...]

  • Toemouse says:

    To be honest, the need for a comment there is probably as poor as the IE bug itself.

  • Elvira says:

    A big thanks for posting this article!

  • lol what I wanted to know is how did it strike you that it had to be the comment? That is just insane.

  • Robert Nyman says:

    Ha! Well, I tried a few things, and then it hit me. :-)

  • Shashikant says:

    IF we add the tag at the top of the HTML then this issue may get resolve.

    I also faced same issue but the problem get resolved when i add the above tag.

  • Shark says:

    I had no idea IE7 supported first-child. Why not nth or last?

  • Krunal Vachheta says:

    Thanks Robert great helpful article.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>