The Double-class/Double-ID CSS Hack for IE6 & IE7

I haven’t seen this CSS hack for Internet Explorer before. I encountered this by accident today while trying to work out an IE6 display error. My preliminary Google searches and few hours of research didn’t find this documented anywhere, but I highly doubt I’m the first one to encounter this. In any event, I’m tentatively calling this the “Double-class” IE hack. It lets you target IE6 specifically, or IE6 and IE7 both. I haven’t found a way to specifically target IE7 using this.

In a nutshell, if you want to target IE6 use two class periods:

..className{ /* styles here */ }

To target IE7 and IE6 both, double-declare the class name:

..className, .className{ /* styles here */ }

Or, an alternate way to do this and target both IE6 and IE7 is this:

., .className{ /* styles here */ }

This also works with IDs:

.#classID{ /* styles here */ } /* IE6 Only */

., #classID{ /* styles here */ } /* IE6 and IE7 */

Leave a Reply

Your email address will not be published. Required fields are marked *