Remove margin in last child

Question

My code here:

HTML

<nav id="pages">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#" class="last">Contact</a></li>
    </ul>
</nav>  <!-- end pages -->

CSS

#pages{
    position: absolute;
    right: 0;
    top: 70px;

    ul li{
        float: left;
        margin-right: 5px;

        a{
            color: @link-color;
            display: block;
            padding: 0 10px;
            border-radius: 5px;
            font-weight: bold;
        }
    }
}

.last{
    margin-right: 0;
}

I add class "last" to last child to remove margin but not effected. I don't use :last-child because it will not with IE6 or IE7. Hope someone help?

score 11 · Answer 1 · answered Feb 13 '15 at 00:26

There is no need to add a class "last" the best practice to do this and not write a lot of code would be:

#pages li:last-child{
    margin-right: 0px;
}

This way, you don't have to create any class last or anything. The css will look in the id pages, the last li (last-child) and will make it with margin-right of 0.

torrential coding · Answer 2 · 2016-01-28T00:24:00.963

6

You can use :not(:last-child) to exclude the last child. So, for your example, you would have:

nav#pages ul :not(:last-child) {
    margin-right: 5px;
}

This will apply a margin-right: 5px to all but the last <li> ... </li>.

Checkout the jsfiddle example.

edited Jan 28 '16 at 00:24

answered Jan 28 '16 at 00:13

torrential coding

1,755
2
24
34

score 3 · Answer 3 · answered Sep 25 '13 at 16:21

3

In your example it is the li that has the right margin but you have applied the class to the anchor link.

Your exiting CSS will work if you change the HTML to

<li class="last"><a href="#">Contact</a></li>

answered Sep 25 '13 at 16:21

Paulie_D

107,962
13
142
161

1

For improved support (IE8) try `margin-left` instead of `margin-right` which can then be removed with `li:first-child. [Codepen Example](http://codepen.io/Paulie-D/pen/urgqD) – Paulie_D Sep 25 '13 at 16:31
Using :first-child is not only a cleaner approach, but is backward compatible at least to IE7. Throwing "last" on the last kid is absolutely NOT needed. – Dawson Sep 25 '13 at 16:58

score 2 · Answer 4 · answered Aug 01 '19 at 08:12

2

neat thing, give it a go, avoids using :last-child etc..

li + li {
  margin-top: 8px;
}

answered Aug 01 '19 at 08:12

YEVY

1,062
1
12
16

This is an amazing answer because it gives a different way to solve hanging margins at the top or bottom of a container having rows of items. We can understand like this "Whoever is added next to me, should place itself from a margin which means one can use `margin-top` only or `margin-left` if layout is on the same line. `margin-bottom` and `margin-right` leads to an unbalanced container with hanging margins. Thank you so much! – Ritesh Jagga Jun 28 '20 at 16:07
last-child works, however, this fails when there is an after pseudo-element. To overcome this, the next sibling selector would be the ideal pick – Joseph118 Jul 13 '20 at 11:59

Matt · Answer 5 · 2013-09-25T16:29:49.570

1

You need to add the class to the <li> tag, not the <a> tag.

edited Sep 25 '13 at 16:29

answered Sep 25 '13 at 16:21

Matt

3,079
4
30
36

score 0 · Answer 6 · answered Sep 25 '13 at 16:39

The output of this LESS based CSS will be one of this - I'm not sure which one, I'm not this familiar with LESS:

#pages > ul > li {
    margin-right: 50px;
}

#pages ul li {
    margin-right: 50px;
}

The class .last is defined outside of this hierarchy. The problem is, that it's "only" a class and will therefore always have a lower precedence than the rule with the id #pages.

So either you define it fully qualified like this:

#pages ul li.last {
    margin-right: 0;
}

Or you add it inside the other definition:

#pages {
    ul li {}
    ul li.last { margin-right: 0; }
}

Demo

Try before buy

score 0 · Answer 7 · answered Sep 25 '13 at 16:49

0

Change your CSS to

nav#pages ul li.last {
    margin-right: 0px;
}

and your HTML to:

<li class="last"><a href="#">Contact</a></li>

answered Sep 25 '13 at 16:49

Charles Ingalls

4,521
5
25
33

score -3 · Accepted Answer · answered Sep 25 '13 at 16:19

-3

Try this:-

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

answered Sep 25 '13 at 16:19

Rahul Tripathi

168,305
31
280
331

1

i remember some author not use !important method – Hung PD Sep 25 '13 at 16:21
@user2494232:- Did you gave that a try?? – Rahul Tripathi Sep 25 '13 at 16:22
2

Actually this should do the trick too. But please don't encourage people to use `!important`, see: [What are the implications of using “!important” in CSS?](http://stackoverflow.com/q/3706819/1456376) – insertusernamehere Sep 25 '13 at 16:44
1

**!important is useful**. It shouldn't be your "I'm lazy, and am not going to fix my specificity problems" tool, but to discount its validity is wrong. *Guns don't kill. People kill, brah* – Dawson Sep 25 '13 at 16:55

Remove margin in last child

8 Answers8