Using two CSS classes on one element

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?

I created a simple example to demonstrate the difference between the descendent selector and the double-class selector: jsfiddle.net/jyAyX. Also, see developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors. — AlexMA
– AlexMA, Commented Aug 11, 2012 at 23:58
Just curious if I do: <p class = "a" class = "b"></p> will both rules be applied or just b or ... I am doing a quick and dirty alpha and was about to cut and paste class statements into lots of elements that did not have classes but a few do. Just trying to work out how this would be handled. Have looked bit with no joy. — BeNice
– BeNice, Commented Sep 12, 2016 at 13:26
Also related (if not even considered as duplicate of): CSS Selector that applies to elements with two classes — Adrian W
– Adrian W, Commented Jul 15, 2018 at 18:01
@BeNice Only the first class attribute applies; the second one will be ignored. In your example, class = "a" will apply, class = "b" will be ignored. — Ken Johnson
– Ken Johnson, Commented Jan 27, 2021 at 5:35

tybro0103 · Accepted Answer · 2016-01-21 15:53:37Z

696

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/

edited Jan 21, 2016 at 15:53

answered Aug 11, 2012 at 23:31

tybro0103

49.9k34 gold badges149 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Francesca Over a year ago

Thanks, wasn't aware I could double up like that :) Good to know for the future!

Marco Castanho Over a year ago

What would happen if we had just <div class="first"></div> ?

tybro0103 Over a year ago

@MarcoCastanho I updated answer with link to example

user1467439 Over a year ago

I just wanted to add the order which you reference the CSS element will not matter so you can also reference it in css like so: .first.social {} and it will be the same as .social.first {}

Pramod Over a year ago

it is important to note that there is no space in between 2 classes. Spent 5 minutes figuring out what I was doing wrong.

|

thecodeparadox · Accepted Answer · 2012-08-12 09:03:06Z

44

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

edited Aug 12, 2012 at 9:03

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

answered Aug 12, 2012 at 8:41

Codegiant

2,1501 gold badge22 silver badges31 bronze badges

Comments

Pankaj Juneja · Accepted Answer · 2017-05-17 18:22:26Z

34

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">

answered May 17, 2017 at 18:22

Pankaj Juneja

3413 silver badges2 bronze badges

Comments

colonelclick · Accepted Answer · 2017-11-06 18:03:15Z

20

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.

edited Nov 6, 2017 at 18:03

colonelclick

2,2432 gold badges26 silver badges34 bronze badges

answered Nov 6, 2017 at 17:15

Joseph Colbert

2012 silver badges2 bronze badges

1 Comment

RBT Over a year ago

For some reason it didn't work for me, although I also believe that it should work the way you've mentioned. Suspecting if my CSS classes being defined in two different stylesheets could be a factor. Need to investigate this.

Šime Vidas · Accepted Answer · 2012-08-11 23:40:56Z

10

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

answered Aug 11, 2012 at 23:40

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Comments

Daratrix · Accepted Answer · 2015-10-28 19:35:19Z

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

Oriol · Accepted Answer · 2014-08-07 14:58:24Z

6

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.

edited Aug 7, 2014 at 14:58

answered Aug 11, 2012 at 23:41

Oriol

291k71 gold badges459 silver badges535 bronze badges

1 Comment

Halfacht Over a year ago

To see if you can use :last-child and :first-child in other browsers check: caniuse.com/#search=first-child

Razan Paul · Accepted Answer · 2016-03-23 06:23:21Z

5

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/

answered Mar 23, 2016 at 6:23

Razan Paul

13.9k3 gold badges74 silver badges61 bronze badges

Comments

Zerium · Accepted Answer · 2018-12-12 01:20:50Z

1

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

edited Dec 12, 2018 at 1:20

Zerium

17.4k33 gold badges120 silver badges187 bronze badges

answered Oct 4, 2016 at 1:00

user6913790

Comments

jen · Accepted Answer · 2025-08-20 10:49:08Z

0

If you are using className you can just use string interpolation.

styles.module.css file

.mermaidRows{
  display: flex;
  flex-direction: row;
}

.mermaidColor{
  background-color: purple;
}

Then in the .tsx file html

import styles from './styles.module.css';

<div className={`${styles.mermaidRows} ${styles.mermaidColor}`}>
...
</div>

Both styles will be applied to the div.

answered Aug 20 at 10:49

jen

3593 silver badges11 bronze badges

Collectives™ on Stack Overflow

Using two CSS classes on one element

10 Answers 10

6 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

6 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related