Псевдокласс :first-child и комбинатор + в IE7

Опубликовано:

Начиная с версии 7, Internet Explorer (IE) поддерживает селектор :first-child и комбинатор +, которые позволяют сделать HTML-код заметно более чистым.

Но есть ограничение: если в HTML-коде «на месте» элемента, на который указывает селектор, окажется комментарий, IE7 «запутается», и к реальному элементу, следующему за комментарием, стили уже не применятся.

В следующем примере стили к абзацам применятся во всех распространённых браузерах (в том числе IE8+), но не в IE7:

HTML:
<div>
    <!-- Комментарий перед первым элементом -->
    <p>Первый абзац.</p>
    <!-- Комментарий между элементами -->
    <p>Второй абзац.</p>
</div>
CSS:
P:first-child {color: #0f0; } /* первый дочерний абзац */
P + P {color: #00f; } /* абзац, следующий за абзацем */

К счастью, проблему можно обойти путём динамического удаления HTML-комментариев как DOM-узлов средствами JavaScript по факту загрузки HTML-страницы. Например, с помощью такой функции:

function removeComments() {
    // http://tanalin.com/blog/2011/08/ie7-css-first-child-adjacent/
    var elems = document.getElementsByTagName('*'),
        count = elems.length,
        comments = [];

    for (var i = 0; i < count; i++) {
        var elem = elems[i],
            childNodes = elem.childNodes,
            childCount = childNodes.length;

        for (var j = 0; j < childCount; j++) {
            var node = childNodes[j];

            if (8 === node.nodeType) {
                comments.push(node);
            }
        }
    }

    var commentsCount = comments.length;

    for (var k = 0; k < commentsCount; k++) {
        comments[k].removeNode();
    }

    // Принудительная перерисовка страницы для гарантированного применения стилей
    document.body.className = document.body.className;
}

Демо-страница