Grow your CSS skills. Land your dream job.

Last updated on:

Remove Margins for First/Last Elements

It can sometimes be desirable to remove the top or left margin from the first element in a container. Likewise, the right or bottom margin from the last element in a container. You can do this by manually applying classes to the HTML:

.first { margin-top: 0 !important; margin-left: 0 !important; }
.last { margin-bottom: 0 !important; margin-right: 0 !important; }

The "top"/"bottom" zeroing being useful with a vertical stack of elements, "left"/"right" zeroing being useful for horizontal rows (in general). But... this method is dependent on you adding classes to the HTML yourself. Pseudo-selectors can be a better less intrusive way to go:

* > :first-child { margin-top: 0 !important; margin-left: 0 !important; }
* > :last-child { margin-bottom: 0 !important; margin-right: 0 !important; }

You may want to replace the * with more specific selectors as per your needs.

"Every Third", etc.

Lets say you had a floated block of 9 elements, 3 by 3. It's very common that you might need to remove the right margin from the 3rd, 6th, and 9th items. The nth-child pseudo-selector might be able to help there:

* > :nth-child(3n+3) { margin-right: 0; }

The equation there, 3n+3, works like this:

(3x0)+3 = 3
(3x1)+3 = 6
(3x2)+3 = 9
etc.

jQuery

jQuery uses CSS3 selectors, which includes :first-child, :last-child, and :nth-child(). This means that in browsers with don't or don't fully support these selectors, they WILL work in jQuery, so you can substitute the CSS support with JavaScript support. For example:

$("* > :nth-child(3n+3)").css("margin-right", 0);

Browser support

:first-child and :last-child works in the latest release from all major browsers, but not in IE 6. :first-child is supported in IE 7+. :nth-child works in Safari 3+, Firefox 3.5+, and Chrome 1+, but still doesn't work in IE8.

Also see David Oliver's article.

Comments

  1. Permalink to comment#

    And what about non-JS browser? You are giving JS the responsibility of CSS, which I think, is as bad as embedding it on HTML.

    A cool trick anyway, but non-suitable for work. In my personal projects I will use it.

  2. JQuery is the best option.
    It works on every browser.

    Thanks Chris for the tip.

  3. Permalink to comment#

    hello chris

    Thank you so much jQuery work is good i like your bolg it’s very helpful to me for css and jQuery

    thank you so much again

  4. Permalink to comment#

    I’m not sure why it’s

    "* > :first-child"

    rather than

    "*:first-child"

    Because when I use

    H1 > :first-child

    it doesn’t match what I think it will (the first H1 in a div). But when I use

    H1:first-child

    it works.

    Thoughts?

    • Dark Phoenix
      Permalink to comment#

      H1 > :first-child
      means “Find me all elements that are the first child of an H1 element”.
      H1:first-child
      means “Find me all H1 elements that are the first children of any container element”.

      There’s a subtle difference between them. First child fools a lot of people this way (I know I found it somewhat confusing for a while when I first started with it), but it makes sense if you think about it hard enough.

      In fact, if there’s an element above the H1 in your DIV, H1:first-child won’t work either. In that cause, you need H1:first-of-type.

  5. Jeff Sturgis
    Permalink to comment#

    the > selector is the child selector. It will match all direct descendants of the preceding selector.

    There is a good explanation here:

    http://meyerweb.com/eric/articles/webrev/200006b.html

  6. Will
    Permalink to comment#

    I have to say thank you very much as this helped me a lot!!! I wanted to use it on borders instead of margins and it worked perfectly.

  7. I have to say that giving the advice of using jQuery without even mentioning the drawbacks is pretty counterproductive as it implies that all problems can be solved with jQuery. This is just promoting bad practice since many people tend to not even care to do things right in the first place, they just “fix” things with jQuery – good bye progressive enhancement.

    Through my long time activity as moderator on CodingForums.com I’ve seen many people that don’t even fully understand what jQuery actually is (because it makes all things JavaScript so simple that even the most ignorant people can use it — and many use that 32KB library for even the smallest things that could be written with one or two lines of regular JS) and by confronting them with uncommented (in terms of education) snippets of jQuery code to solve cross-browser issues they don’t learn it after all (as we can see with two comments above).

  8. Justin
    Permalink to comment#

    Maybe I’m just reading it incorrectly, but the Browser Support section seems to be wrong.

    :first-child and :last-child works in the latest release from all major browsers, but not in IE 6. :first-child is supported in IE 7+. :nth-child works in Safari 3+, Firefox 3.5+, and Chrome 1+, but still doesn't work in IE8.

    I read that as ‘:last-child’ works in all major browsers except IE6, including IE7 and IE8. I’m not sure about IE7, but my experience is that IE8 does not support ‘:last-child’.

  9. Permalink to comment#

    This simple formula saved my day! For displaying portfolio items in two or three rows I badly need to remove margin from last element. This formula simply does the trick! Kudos.

  10. Mihai
    Permalink to comment#

    Thank you! Exactly what I needed.

  11. Hey folks, I thought I would share a method that gets around the need to remove any margin that I have been using for many years.

    So, all your floated blocks/divs/items go inside a container div that has additional width assigned to it so it can contain the overflowing margin of the last item in each row, and then use negative margin-right to bring that container’s width back in within your overall site width, all without pushing the last item of the row into the next row.

    See here: http://jsbin.com/cakayeca/3/edit

  12. Derek
    Permalink to comment#

    I had to use “> *:first-child” to get it to work.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".