What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » CSS » Remove Margins for First/Last Elements

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.

Subscribe to The Thread

  1. JMLeon

    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.

    Reply ↓
  2. Mauricio

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

    Thanks Chris for the tip.

    Reply ↓
  3. chirag

    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

    Reply ↓
  4. Peter

    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?

    Reply ↓
  5. Jeff Sturgis

    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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~