• 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


Xenonsoft

Active Member
#1
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.
 

Kevin

Senior Member
#2
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