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.
41 Comments/Reactions
February 4th, 2009 at 10:57
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?
February 4th, 2009 at 12:03
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
February 4th, 2009 at 12:04
I guess it’s like IE’s jscript engine, which thinks comment nodes and HTML elements are the same thing
February 4th, 2009 at 12:53
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
February 4th, 2009 at 13:11
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.
February 4th, 2009 at 13:50
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…
February 4th, 2009 at 14:37
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.
February 4th, 2009 at 18:38
So very typical of MS. To implement a feature almost all the way…
February 4th, 2009 at 19:56
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
:hoverFebruary 4th, 2009 at 20:51
@Christopher Papastefanou
Wouldn’t you say that this time they implemented it, but then went too far? They do that just about as often.
February 4th, 2009 at 23:07
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.
February 5th, 2009 at 8:29
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.
February 5th, 2009 at 8:49
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…
February 5th, 2009 at 13:33
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!
February 5th, 2009 at 16:52
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”.
February 5th, 2009 at 17:28
related problems
http://markmail.org/message/md2wx3j5vxvjplg4
February 5th, 2009 at 21:49
@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 .
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.
February 6th, 2009 at 8:13
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.
February 12th, 2009 at 12:00
[...] 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 [...]
February 17th, 2009 at 23:12
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
February 17th, 2009 at 23:48
Richard,
Glad that it was of help to you!
March 3rd, 2009 at 7:18
[...] How to solve :first-child CSS bug in IE 7 [...]
June 17th, 2009 at 20:04
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.
June 17th, 2009 at 21:41
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.
June 17th, 2009 at 22:23
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.
June 17th, 2009 at 22:36
Martin,
No worries.
September 23rd, 2009 at 16:30
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:
<!DOCTYPE html...This text just include document information, such as:
<!– filename: index.html; author: author’s name… –>
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.
January 28th, 2010 at 16:50
Robert, you saved my beard. Thank you!!!
January 28th, 2010 at 16:53
Stefan,
Great!
February 21st, 2010 at 11:07
Man, I wanna kiss you
. 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 
February 21st, 2010 at 18:09
Abdullah,
Great to hear that it helped out!
April 1st, 2010 at 22:51
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.
April 5th, 2010 at 8:56
Martin,
You’re welcome!
April 27th, 2010 at 6:27
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
check this code there is no any comments in this code bur still last child and first child is not working ie 7
April 27th, 2010 at 6:49
<html xmlns=”http://www.w3.org/1999/xhtml”>
<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>
<ul>
<li><a href=”#” title=”First”>First</a></li>
<li>Second</li>
<li><a href="#first">Third</a></li>
<li title="last">Last</li>
</ul>
</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
April 27th, 2010 at 9:55
abcd,
The CSS pseudo-properties
:last-childand:targetaren’t supported by IE7, but:first-childreally should work for you in that example. Try stripping out all the other CSS and see if it works.April 29th, 2010 at 13:39
yes i checked it’s not working in IE7
April 29th, 2010 at 13:40
is there any idea other than first child and last child
April 29th, 2010 at 13:42
abcd,
Nope, that is all I can think of.
June 29th, 2010 at 6:33
@abcd
I know your post is a couple months old but your code probably isn’t working because the first child <li> 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; }
July 12th, 2010 at 16:19
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)
Write a comment
Twitter reactions