• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Multiple Classes on an Element


Active Member
This may seem pretty n00bish but I was just wondering if it was possible to have 2 classes on one element.

Turns out it is, all you have to do is have a space between them, inside one class declaration (i think that's the right word..).

Such as:

.this { background-color:#fff; font-size:14px; }

.left { float:left; }

<div class="this left">whatever</div>

Obviously that also shows that you can't have classes with spaces in.

Finally, the precedence goes from right to left, so if you had a conflict then the rules in .left {} would be applied. I assume Harry knew this but a few of us may not :)

EDIT: Wrong place, please move to Web Development.


Senior Member
I knew that. But it doesn't go from right to left (in the HTML), it goes from bottom to top in your css.

<div class="left this">whatever</div>
That doesn't mean .this {} will dominate .left {} ;)

EDIT: I forgot that overruling is based on how specific the selector is. I can't remember exactly which is which, but it's the same principal that makes an id bigger than a class. ID specificity is 100, class is like only 20 I think.

EDIT2: CSS Specifity: Things You Should Know