merge 2 css classes in to a 1 class? Options

[CharliePrince]

I have two css classes that do the exact same thing, in this case, each of the two classes apply the small-caps font where, the top class is for <div>s and the lower one is for <span>s.

In my css file, is there a way to have only 1 small_caps class that can be used with different html tags?

my css file looks like this

CODE

div.small_caps {
  font-variant: small-caps;  
}

span.small_caps {
  font-variant: small-caps;  
}

My html looks like this

CODE

<div class="small_caps">Machine Automation</div>

<div> <span class="small_caps">Machine</span> Automation</div>

[pandy]

Hi-hi!

Ditch the element parts of the selectors.

CODE

.small_caps {
  font-variant: small-caps;  
}

[CharliePrince]

I'm such a knucklehead ha. I swear I tried that and it didn't work but it works now. Thanks again pandy!

[pandy]

Only time it wouldn't work is if you have another selector that sets font-variant to something else that overrides this. And it can do that only by higher specificity or cascade precedency.

[CharliePrince]

Only time it wouldn't work is if you have another selector that sets font-variant to something else that overrides this. And it can do that only by higher specificity or cascade precedency.

Excellent info sir, excellent! That (being overridden) must have been what I was doing

[pandy]

Or you simply made a typo.