How to Access Two Ids in One CSS Selector

How to access two Ids in one css selector

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

How to select multiple ids in CSS?

Use an attribute selector
on the id attribute:

[id^='test_id_'] { color: red; }

Description:

[attr^=value] represents an element with an attribute name of attr and whose first value is prefixed by "value".

Use multiple IDs for divs in CSS

You have to put

#box-left a, #box-middle a, #box-right a {
    text-decoration:none;
    color:#000000;
}

Each value on the comma separator list is a selector on its own, it is not combined with the next elements:

#foo, .class p, #bar p:first-child a {
  something;
}

is equivalent to

#foo {
  something;
}

.class p {
  something;
}

#bar p:first-child a {
  something;
}

Is it possible to have multiple ID selectors in CSS

To answer your question, it works cross browser, and what you wrote is correct. Only "More stuff" will be in red.

But it is not recommended to use ID's for styling.
A nice reference to read more about this can be found here. The entire article is a great read by the way, if you want to learn more about writing good CSS!

The most important part of it, concerning IDs is:

• IDs can never be used more than once in a page.
• Classes can exist only once, or a million times in a page.
• IDs can often have their traits abstracted out into many reusable classes.
• An ID is infinitely more specific than a class.
• This means no amount of chained classes can override an ID.

How to apply CSS elements property on multiple ids or class

Your first 4 rules select only the elements with id's #id1, #id2 etc.
Each comma separated part in the selector is a selector independent of other selector segments. So, you cannot use first selector as basis for following selectors.

select#id1  option:disabled, 
#id2  option:disabled,
#id3  option:disabled,
#id4  option:disabled,
#id5  option:disabled{

}

In plain css, I don't think you can avoid specifying option:disabled multiple times (except using class instead of id). You can give your select elements a common class e.g. myselect, and then write a single rule instead of this, like -

.myselect option:disabled{
}

Selecting multiple CSS ids with only 1 number changing on each

You can use the attribute selector: [attr*=value]:

[id*=edit-add-to-wishlist] {
    color: red;
}

jsFiddle here - it works

It selects all instances where a id contains edit-add-to-wishlist

[attr*=value]

Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

MDN documentation on the attribute selector

Declaring same css for more than one id?

if you want to style all H1 under those Ids, you have to repeat H1 for every one as they don't share anything:

#foo h1, #ball h1, #tree h1 {color: #892828;}

what you wrote is equivalent to:

#foo {color: #892828;}
#ball {color: #892828;}
#tree h1 {color: #892828;}

---

Related Topics