Child Selectors in IE

Good day to all.

As you know, Internet Explorer up to version 7 does not support child selectors of the form E> F. Risking to get a lot of minuses from a more enlightened audience of Habr, I want to share a little trick that allows you to emulate the functionality of child selectors for IE version 6 and below.


The trick is quite simple:
')

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

 <! - then through the conditional comments we include instructions for IE6 and less, they love it ->
 <! - [if lte IE 6]>
 <style type = "text / css">
 div span {color: # f00;  } / * rules similar to those for child selectors * /
 div * span {color: # 0f0;  } / * reset to default values ​​* /
 </ style>
 <! [endif] ->


 <div>
 <span> the text of this span is red, because  located directly on the div tag </ span>
 </ div>

 <div>
 <p>
 <span> for this span the text is green, because  inside the div it is nested in another tag </ span>
 </ p>
 </ div>

I hope someone this trick will be useful