How can I set a CSS Select for all but the last child?

Question

I have this CSS:

.btn-group > .btn {
    margin-right: 0; // << I want this for all except last child
    position: relative;
    border-radius: 0;
}

Is there a way that I can make this margin-right work for all .btn except the last child?

Possible duplicate of [CSS :not(:last-child):after selector](http://stackoverflow.com/questions/5449872/css-notlast-childafter-selector) — , Feb 14 '16 at 11:15
An SO search on "not last child css" would have turned up the existing answer easily. — , Feb 14 '16 at 11:16

score 1 · Accepted Answer · answered Feb 14 '16 at 11:15

1

You can use :not() negation CSS pseudo-class

.btn-group > .btn:not(:last-of-type) {
    color: green;
}

<div class="btn-group">
  <div class="btn">Button</div>
  <div class="btn">Button</div>
  <div class="btn">Button</div>
</div>

answered Feb 14 '16 at 11:15

Nenad Vracar

Sure, but why don't you show him how to use this idea in the context of the actual situation he presented? – Feb 14 '16 at 11:29
Very nice. I learned now what last-of-type means. Never heard of that before. – Feb 14 '16 at 11:34
How is `last-of-type` different and/or better here than `last-child`? – Feb 14 '16 at 11:36
@torazaburo I am not sure what is full context of question but i guess its something like this https://jsfiddle.net/Lg0wyt9u/27/ also this qualifies as answer for question `How can I set a CSS Select for all but the last child?` – Nenad Vracar Feb 14 '16 at 11:39

score 0 · Answer 2 · answered Feb 14 '16 at 11:17

0

Try it

.btn-group > .btn:not(:last-child) {
    margin-right: 0; 
    position: relative;
    border-radius: 0;
}

answered Feb 14 '16 at 11:17

khaled

This will fail to set `position` and `border-radius` on the last child. – Feb 14 '16 at 11:28

Abhay Shukla · Answer 3 · 2016-02-14T11:37:06.703

-1

use the :not() selector

.btn-group > .btn:not(#someid) {
    margin-right: 0;
    position: relative;
    border-radius: 0;
}

Then assign id="someid" to the innermost child

and create a new CSS

.btn#someid {
    position: relative;
    border-radius: 0;
}

for the last child

edited Feb 14 '16 at 11:37

answered Feb 14 '16 at 11:14

Abhay Shukla

Wouldn't it be better to use `:not(:last-child)`? – Ryuu Feb 14 '16 at 11:15
This won't do what he wants, because it will fail to set `position` and `border-radius` on the last child. Also, note that `:not()` is not a selector, it's a **pseudo-class**. – Feb 14 '16 at 11:28

3 Answers3