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   lt div class  social  class  first  gt       lt div class  socialIcon  gt  lt img src  images facebook png  alt  Facebook    gt  lt  div gt       lt div class  socialText  gt Find me on Facebook lt  div gt   lt  div gt    I m guessing it s not possible to have two different classes  If so how can I do this

User · Answer

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/

User · Answer

If you want two classes on one element  do it this way    lt div class  social first  gt  lt  div gt    Reference it in css like so    social first      Example   https   jsfiddle net tybro0103 covbtpaq

User · Answer

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

User · Answer

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

User · Answer

You can try this   HTML   lt div class  social  gt       lt div class  socialIcon  gt  lt img src  images facebook png  alt  Facebook    gt  lt  div gt       lt div class  socialText  gt Find me on Facebook lt  div gt   lt  div gt    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    lt div class  class1 class2 class3  gt  lt  div gt    DEMO

User · Answer

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

User · Answer

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

User · Answer

Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute  For example    lt img class  class1 class2  gt

User · Answer

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

[css] Using two CSS classes on one element

Examples related to css

Examples related to class