Multiple CSS Classes on a Single Element issue

I'm using a combination of two classes on a span element.

Both look like they're working by themselves... Together they're not.

.black {color:black;}
.size_14 {font-size:14px;}


<span class="black size_14">my text is not black..neither large</span>

I tried changing the size_14 class name for another one (large) and in this case it is working.

Is size_14 an invalid class name?

SOLVED

I was overriding the behaviour with

.article_text_div .size_14 {color:#6D6E71;}

But thanks to this mistake I disc开发者_如何学Covered It's better(?) not to use underscores inside class names

Double thanks

Luca

That example seems to work fine. There must be another rule that is overriding your change. Check the CSS with Firebug or a similar inspector, it will tell you exactly which classes are being used and overridden.

Underscores are not recommended in class names and ID's. Support is mixed across the board. I would remove it or replace it with a dash.

If I were you I'd be inclined to try the following, but without seeing the rest of the code it's difficult to tell if it'll make a difference..

.black{color:black;}
.size-14, span.size-14{font-size:14px;}

You can use underscore, article in above comment was written in 2001. All latest browser supports use of _. But most developer prefer to use "-" for class names.

http://jsfiddle.net/ZsR4A/embedded/result/

Works as expected in IE, FF, Chrome. Make sure your size_14 has higher specificity.