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. stackoverflow.com/questions/448981/… but browser support is spotty. — Matt Ball
– Matt Ball, Commented May 6, 2011 at 17:09
Please show the complete page. If you've typed them together like what you've shown, they'll never work. — itsols
– itsols, Commented May 6, 2011 at 17:11

Kaivosukeltaja · Accepted Answer · 2011-05-06 17:14:37Z

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 6, 2011 at 17:14

Kaivosukeltaja

15.8k5 gold badges45 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dustin Laine · Accepted Answer · 2011-05-06 17:10:35Z

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 6, 2011 at 17:10

Dustin Laine

38.7k10 gold badges90 silver badges125 bronze badges

1 Comment

thirtydot Over a year ago

That's from 2001, and is talking is about browsers like IE5 and Opera 5.

nahanil · Accepted Answer · 2011-05-06 17:18:18Z

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 6, 2011 at 17:18

nahanil

5223 silver badges10 bronze badges

Comments

dean · Accepted Answer · 2011-05-06 17:24:06Z

0

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.

answered May 6, 2011 at 17:24

dean

931 gold badge1 silver badge4 bronze badges

Collectives™ on Stack Overflow

Multiple CSS Classes on a Single Element issue

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related