Using two CSS classes on one element - css

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

Answer 3

Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute. For example:
<img class="class1 class2">

Answer 4

If you have 2 classes i.e. .indent and .font, class="indent font" works.
You dont have to have a .indent.font{} in css.
You can have the classes separate in css and still call both just using the class="class1 class2" in the html. You just need a space between one or more class names.

Answer 5

If you only have two items, you can do this:
.social {
width: 330px;
height: 75px;
float: right;
text-align: left;
padding: 10px 0;
border: none;
}
.social:first-child {
padding-top:0;
border-bottom: dotted 1px #6d6d6d;
}

Answer 6

I know this post is getting outdated, but here's what they asked.
In your style sheet:
.social {
width: 330px;
height: 75px;
float: right;
text-align: left;
padding: 10px 0;
border-bottom: dotted 1px #6d6d6d;
}
[class~="first"] {
padding-top:0;
}
[class~="last"] {
border:0;
}
But it may be a bad way to use selectors. Also, if you need multiple "first" extension, you'll have to be sure to set different name, or to refine your selector.
[class="social first"] {...}
I hope this will help someone, it can be pretty handy in some situation.
For exemple, if you have a tiny piece of css that has to be linked to many different components, and you don't want to write a hundred time the same code.
div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}
div.myClass1.red {color:red;}
div.myClass2.red {color:red;}
...
div.myClassN.red {color:red;}
Becomes:
div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}
[class~=red] {color:red;}

Answer 7

If you want to apply styles only to an element which is its parents' first child, is it better to use :first-child pseudo-class
.social:first-child{
border-bottom: dotted 1px #6d6d6d;
padding-top: 0;
}
.social{
border: 0;
width: 330px;
height: 75px;
float: right;
text-align: left;
padding: 10px 0;
}
Then, the rule .social has both common styles and the last element's styles.
And .social:first-child overrides them with first element's styles.
You could also use :last-child selector, but :first-childis more supported by old browsers: see
https://developer.mozilla.org/en-US/docs/CSS/:first-child#Browser_compatibility and https://developer.mozilla.org/es/docs/CSS/:last-child#Browser_compatibility.

Answer 8

Another option is to use Descendant selectors
HTML:
<div class="social">
<p class="first">burrito</p>
<p class="last">chimichanga</p>
</div>
Reference first one in CSS: .social .first { color: blue; }
Reference last one in CSS: .social .last { color: green; }
Jsfiddle: https://jsfiddle.net/covbtpaq/153/

Answer 9

Instead of using multiple CSS classes, to address your underlying problem you can use the :focus pseudo-selector:
input[type="text"] {
border: 1px solid grey;
width: 40%;
height: 30px;
border-radius: 0;
}
input[type="text"]:focus {
border: 1px solid #5acdff;
}