:first-child pseudoclass and sibling combinator in IE7

Published:

2011-08-11

As of version 7, Internet Explorer (IE) supports :first-child CSS-selector and sibling combinator (+) that allow to make HTML code much cleaner.

There is a limitation though: if HTML code has a comment in place where browser expects to see an element according to CSS selector, IE7 will be “confused” and will not apply styles to actual element located next to the comment.

In the following example, styles will be applied to paragraphs in all popular browsers (including IE8), but not in IE7:

Fortunately, there is a workaround for this issue: HTML comments as DOM nodes can be removed from DOM tree dynamically with JavaScript once HTML page is loaded. This can be done, for example, with the following function (see live example):