[解決済み】1つの要素に2つのCSSクラスを使用する【重複あり

質問

何が間違っているのでしょうか？

私の場合は .social div しかし、最初のものは上部のパディングをゼロにし、2番目のものは下部のボーダーをなしにしたいのです。

この最初と最後のクラスを作ろうとしたのですが、どこかで間違っているような気がします。

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

そして、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>

2つの異なるクラスを持つことは不可能なのでは？もしそうなら、どうすればいいのでしょうか？

どのように解決するのですか？

1つの要素に2つのクラスが欲しい場合は、このようにします。

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

cssでこのように参照します。

.social.first {}

例

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