Since IE6 finally phased out, Internet Explorer 7 becomes the last true headache for web designers. Webkit, gecko, and IE8 browsers have subtle differences, but it is somewhat easy to make a consistent design.

Do you constantly have designs that look great in every browser but IE7? You are not alone! Sometimes you could just finish your work and move on if not for IE7. A quick IE7 specific CSS selector is exactly what you need.

I certainly didn’t come up with this, but I find it helpful so often that I wanted to enter it here at SolidlyStated so it would always be available.

You can use this selector right along with your other CSS and it is fully valid with the W3C. It requires nothing else and is ignored by other browsers. To make a class that applies only to IE7, simply put *:first-child+html in front of your classname.


.mydiv { background: red; } /* All */
*:first-child+html .mydiv { background: blue; } /* IE7 only */

This example shows “mydiv” with a blue background in IE7 and red everywhere else.

Remember not to forget the period in front of your classname. If this tip helped you, leave a comment!