Pull to refresh

Дочерние селекторы в IE

CSS *
Добрый день всем.

Как известно, Internet Explorer вплоть до 7 версии не поддерживает дочерние селекторы вида E>F. Рискуя получить множество минусов от более просвещенной аудитории Хабра, хочу поделиться маленькой хитростью, которая позволяет эмулировать функциональность дочерних селекторов для IE версии 6 и ниже.


Трюк достаточно простой:

<style type="text/css">
body { color: #0f0; font-weight: normal; }
div>span { color: #f00; }
</style>

<!-- далее через условные комментарии подключаем инструкции для IE6 и менее, они это любят -->
<!--[if lte IE 6]>
<style type="text/css">
div span { color: #f00; }    /* правила, аналогичные прописанным для дочерних селекторов */
div * span { color: #0f0; }  /* сброс на значения по умолчанию */
</style>
<![endif]-->


<div>
<span>текст этого span красный, т.к. находится непосредственно в теге div</span>
</div>

<div>
<p>
<span>у этого span текст зеленый, т.к. внутри div'а он вложен в другой тег</span>
</p>
</div>


Надеюсь, кому-то эта хитрость окажется полезной

Tags:
Hubs:
Total votes 53: ↑39 and ↓14 +25
Views 2.6K
Comments 18
Comments Comments 18