CSS2: Valid CSS rule to target older browsers such as IE6 and IE7

A simple CSS rule making use of child selectors which allows you to target older versions of Internet Explorer.

07 October 2011

I know every frontend developer wishes the world would upgrade their copy of Internet Explorer! Now Microsoft have released IE9 hopefully targetting older browsers may not be so much of an issue but every now and then it is still a necessity. I know some people prefer to use conditional stylesheets but often when there are only one or two CSS rules which need a fall back for IE6 and IE7 I use child selectors.

Take a look at the following example, I want to set a height on an element but if the content within that element is greater than the height I have set I want the box to grow. I set the following for IE6 and IE7:

.an_element { height: 100px; }

For browsers such as Firefox, Chrome and Safari I then set the following rule which will overide the 'height' by setting it to auto but specify a minimum height. IE6 and IE7 ignore this rule as they don't understand child selectors:

div > .an_element { height: auto; min-height: 100px; }

For more information about CSS selectors please visit W3C.

.an_element { height: 100px; }
div > .an_element { height: auto; min-height: 100px; }