CODEWITHSUNDEEP
css
luca
luca

Reputation: 37136

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

Double thanks

Luca

Upvotes: 5

Views: 1413

Answers (4)

dean
dean

Reputation: 93

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.

Upvotes: 0

nahanil
nahanil

Reputation: 522

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

Upvotes: 0

Kaivosukeltaja
Kaivosukeltaja

Reputation: 15735

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.

Upvotes: 4

Dustin Laine
Dustin Laine

Reputation: 38503

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.

Upvotes: 2

Related Questions