Исправляем дефект CSS-селектора «child»

В спецификации CSS 2.1 есть замечательное правило «child selector ». Но оно пока не получило популярности из-за того, что не работает в IE6. Первая и, к сожалению, не без дефектов реализация в этой линейке браузеров была сделана в IE7.

Однако есть трюк, который эмулирует действие этого правила.


<div id="article">
    <h1>Header</h1>
    <p>First level paragraph</p>
    <div>
        <p>Paragraph inside div element</p>
    </div>
</div>
<p>Copyright info</p>

p {
    font-size: 14px;
}
#article > p {
    font-size: 18px;
    font-weight: bold;
}

Всем параграфам документа назначается высота шрифта 14px. Параграфы, которые являются непосредственными потомками блока с идентификатором article, выделяется жирным шрифтом и высотой шрифта 18px.

Для IE используем следующие правила.


#article p {
    font-size: 18px;
    font-weight: bold;
}
#article * p {
    font-size: 14px;
    font-weight: normal;
}

Сначала все потомки блока с идентификатором article получают специальные правила, а затем у внучатых потомков значения измененных стилей возвращаются назад.

Главным недостатком этого способа является то, что требуется знать исходные значения стилей, которые изменялись.