How to access two Ids in one css selector

Question

I have div which has three buttons as,

<div id="buttons">     <input id="preview" class="ButtonStyle" type="submit" value="Preview" name="preview">     <input id="add" class="ButtonStyle" type="submit" value="Save" name="add">     <input id="Cancel" class="ButtonStyle" type="submit" value="Cancel" name="Cancel"> </div> 

I set its style. I want that both add and cancel button have their left-margin: 5px; Right now I am doing it in this manner,

#outboxmidpg #buttons input[type="submit"]{     font-weight: bold;     width: 70px; }  #outboxmidpg #buttons input[id="Cancel"] {     margin-left: 5px; }  #outboxmidpg #buttons input[id="add"] {     margin-left: 5px; } 

I want to do it in one line. I tried this, but it didn't work and it removes the cancel button margin too.

#outboxmidpg #buttons input[id="Cancel"] input[id="add"] {     margin-left: 5px; } 

Is there anyway that I can achieve the style in one line?

Thanks

Answer 1

#buttons input:nth-child(2), #buttons input:nth-child(3){     margin-left:5px; } 

does this work for you ?

or simply:

#Cancel, #add{     margin-left:5px; } 

With , seperation you start a complete new CSS Selector and combine them.

Answer 2

Best practice to do is: Just put all the id's/class and separate them by commas (,) then insert your custom style on its body.

#Button_One, #Button_Two { vertical-align: middle;     padding-top: 10px;     margin-top:  1px; } 

Hope it helps :)