Using two CSS classes on one element [duplicate]

Question

What am I doing wrong here?

I have a .social div, but on the first one I want zero padding on the top, and on the second one I want no bottom border.

I have attempted to create classes for this first and last but I think I've got it wrong somewhere:

.social {     width: 330px;     height: 75px;     float: right;     text-align: left;     padding: 10px 0;     border-bottom: dotted 1px #6d6d6d; }  .social .first{padding-top:0;}  .social .last{border:0;} 

And the HTML

<div class="social" class="first">     <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>     <div class="socialText">Find me on Facebook</div> </div> 

I'm guessing it's not possible to have two different classes? If so how can I do this?

Answer 1

If you want two classes on one element, do it this way:

<div class="social first"></div> 

Reference it in css like so:

.social.first {} 

Example:

https://jsfiddle.net/tybro0103/covbtpaq/

Answer 2

You can try this:

HTML

<div class="social">     <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>     <div class="socialText">Find me on Facebook</div> </div> 

CSS CODE

.social {   width:330px;   height:75px;   float:right;   text-align:left;   padding:10px 0;   border-bottom:dotted 1px #6d6d6d; } .social .socialIcon{   padding-top:0; } .social .socialText{   border:0; } 

To add multiple class in the same element you can use the following format:

<div class="class1 class2 class3"></div> 

DEMO