css - Different styles dependent on displayed elements -

i have element contain one, two or three buttons.

when have one button, there no margin right

when have two buttons, first button gets right margin

and when i've three buttons, first , second button right margin

what have tried:

• the :only-child covers needs 1 button.

• the sibling selector works pretty limited when comes 3 buttons

would love read solutions :)

edit:

here comes screen-capture of page: shows 3 possibilities. container either contain one, 2 or 3 buttons. have figured out how edit space around 2 buttons how manage three?

you can use :last-child selector , have css looks this:

button {   margin-right: 10px; } button:last-child {   margin-right: 0px; } 

when have 1 button, last element, , therefore won't have margin. 2 , 3 buttons, last 1 won't have margin.

the :last-child selector works ie9 , above.