Multiple CSS Classes on a Single Element issue

Question

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 discovered It's better(?) not to use underscores inside class names

Double thanks

Luca

`size_14` is a perfectly valid class name. http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names but browser support is spotty. — Matt Ball, May 06 '11 at 17:09
Please show the complete page. If you've typed them together like what you've shown, they'll never work. — itsols, May 06 '11 at 17:11
[Not 100% true!](https://developer.mozilla.org/en/underscores_in_class_and_id_names#Support_realities) — Paolo, May 06 '11 at 18:05

score 4 · Accepted Answer · answered May 06 '11 at 17:14

4

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.

answered May 06 '11 at 17:14

Kaivosukeltaja

15,541
4
40
70

score 2 · Answer 2 · answered May 06 '11 at 17:10

2

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.

answered May 06 '11 at 17:10

Dustin Laine

37,935
10
86
125

That's from 2001, and is talking is about browsers like IE5 and Opera 5. – thirtydot May 06 '11 at 17:18

score 0 · Answer 3 · answered May 06 '11 at 17:18

0

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;}

answered May 06 '11 at 17:18

nahanil

522
3
9

score 0 · Answer 4 · answered May 06 '11 at 17:24

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.

Multiple CSS Classes on a Single Element issue

4 Answers4