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> <div><img src="images/facebook.png" alt="Facebook" /></div> <div>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?

4

9 Answers

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

<div></div>

Reference it in css like so:

.social.first {}

Example:

6

You can try this:

HTML

<div> <div><img src="images/facebook.png" alt="Facebook" /></div> <div>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></div>

DEMO

Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute. For example:

<img>

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.

1

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

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 and .

1

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

Another option is to use Descendant selectors

HTML:

<div> <p>burrito</p> <p>chimichanga</p> </div>

Reference first one in CSS: .social .first { color: blue; }

Reference last one in CSS: .social .last { color: green; }

Jsfiddle:

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