1

I'm trying to style 4 divs (next to each other) of the same class with a margin-right of 35px to divide them evenly, except for the last div so it doesn't add extra margins to the 30px margin already assigned to the right side of the wrapper.

Now, I'm not an expert at coding yet so I might be wrong here, but I was thinking that I could add margin-right: 0; inline to the last div to override the property value 35px in my stylesheet.

Would this work? Or is there a different solution that I'm not seeing?

Edit: thanks to you all, the last-child pseudo selector worked! :-)

Improve this question
2
  • 2
    developer.mozilla.org/en-US/docs/Web/CSS/Specificity. And post a complete code example please. Commented Oct 22, 2014 at 21:22
  • In my opinion inline styling is a bad practice. You could add an additional class like last-div with margin-right: 0 !important;. Commented Oct 22, 2014 at 21:23

4 Answers 4

Reset to default
2

This would override the style and work. But another solution would be to use the :last-child pseudo selector in the sheet.

For more on last-child: http://www.w3schools.com/cssref/sel_last-child.asp

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

2 Comments

this is the correct answer to your question. upvoting.
Providing a brief code example would round up your answer.
2

No need to add inline CSS, you can do that easily using the :last-child psuedo selector. For example, if this is your HTML:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

And the following CSS has been applied to it:

.box {
     display: inline-block;
     margin-right: 35px;
}

You can remove the margin-right from the last div using this CSS:

.box:last-child {
     margin-right: 0px;
}


#container {
  border: 2px solid black;
  width: 317px;
}
.box {
  display: inline-block;
  background: blue;
  width: 50px;
  height: 50px;
  margin-right: 35px;
}
.box:last-child {
  margin-right: 0px;
}
<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Improve this answer

1 Comment

(a) IDs must be unique and (b) the OP wants to style based on a class, not an ID.
1

An inline style sheet (added with the <style> element) is treated no differently for the purposes of the cascade than an external stylesheet (added with the <link> element).

A rule added using the style attribute is treated as having higher specificity then any stylesheet, but can still be overridden by !important rules (unless it it is also !important).

For further reading, see The Cascade.

Rather than using an inline style, you may be better off using :last-child or :last-of-type.

Improve this answer

Comments

1

You can use a :last-child selector to eliminate the margin from the last div:

.ctr {
  border: 1px solid red;
  display: inline-block;
}

.foo {
  margin-right: 35px;
  display: inline-block;
  border: 1px solid blue;
}

.foo:last-child {
  margin-right: 0;
}
<div class="ctr">
  <div class="foo">one</div>
  <div class="foo">two</div>
  <div class="foo">three</div>
  <div class="foo">four</div>
</div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.