CODEWITHSUNDEEP
csscss-selectors
Matt
Matt

Reputation: 5095

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

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?

Upvotes: 4

Views: 1619

Answers (3)

duri
duri

Reputation: 15351

Why not simply use

h2[class] { ... }

Upvotes: 2

user164226
user164226

Reputation:

What you're asking for is how CSS works by default.

The correct way to style elements which have no specific class assigned to them is to style the base element, as Ahsan demonstrated above. I don't know why he got downvoted.

h2 { property: value; }

Note that if H2 elements do have classes assigned to them, then that styling may override your base style.

So if you have: h2 { color:#333; font-size:2em; } as your base style, and then apply class="myClass" to it where: .class { color: #000; }, then the base style's color will be overriden (but not the font size). This is the cascade in Cascading Style Sheets.

Another way is to target them conditionally:

div#nav h2:first-child { property:value; }

which gives you contextual control, but again, class assignment will always override base styling, and may also override context targeting if the class application has higher specificity.

Upvotes: 3

Terry
Terry

Reputation: 66173

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/

Upvotes: 5

Related Questions