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

score 46 · Accepted Answer · answered Mar 28 '12 at 06:39

46

#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.

answered Mar 28 '12 at 06:39

mas-designs

7,498
1
31
56

Oh that's good. Yup first one is working but why are you asking for this? Is it not common? I used the first one because it's new for me. You are selecting childs. Looking good:) But please tell me which one is better or it's just a matter of style or preference? Thanks – Basit Mar 28 '12 at 06:48
You should stick with the second version, because elder browsers and also new Internet Explorer versions do NOT support nth-child !! I just wanted to know if it works ;-). – mas-designs Mar 28 '12 at 06:51
Oh, but why browsers are not supporting nth-child? Do they have any valid reason for it? Asking just for curiosity:) – Basit Mar 28 '12 at 06:58
I don't konw you should ask that the developers of IE :-D – mas-designs Mar 28 '12 at 07:11

score 6 · Answer 2 · answered Dec 11 '14 at 02:11

6

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 :)

answered Dec 11 '14 at 02:11

spongecode

79
2
10

score 1 · Answer 3 · answered Mar 28 '12 at 06:38

1

try this

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

answered Mar 28 '12 at 06:38

PraveenVenu

8,217
4
30
39

score 0 · Answer 4 · answered Mar 28 '12 at 06:39

0

You need to separate selector by comma (,) in their respective full qualified paths, otherwise it won't work:

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

answered Mar 28 '12 at 06:39

Andreas Wong

59,630
19
106
123

score 0 · Answer 5 · answered Mar 28 '12 at 06:40

0

You can do it in one line, but it will be two selectors. Try this:

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

Also, try to use # when selecting id's, it's the proper way to select them.

answered Mar 28 '12 at 06:40

professorsloth

339
1
10

How to access two Ids in one css selector

5 Answers5

Linked