Every h2 except for ones that don't have a class?

Question

I'm wondering how can I apply a style to EVERY h2 that DOES have ANY any class attached to it, thus having the effect that the style will NOT be applied on a plain h2..eg..

<h2 class="1"></h2>
<h2 class="2"></h2>
<h2 class="3"></h2>
<h2 class="a"></h2>
<h2></h2>

All the ones with a class should have a style - and just plain h2 should not, (This is a huge site with hundreds of styles)...so any easy way to do this?

Answer 1

There is a method to do it but it's only possible with browsers that support CSS3 :not pseudo class.

h2[class] {
    /* Styles for <h2> with a class, regardless of the value */
}
h2:not([class]) {
    /* Styles for <h2> without classes */
}

I hope it works!

[Edit] I've made a simple demo for you here - http://jsfiddle.net/fL2sT/