How to Select Multiple Ids in CSS

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

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.

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.

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

Css code for multiple Ids

If I understand you correct, the a-tag is a child of your #btn*-tags. Than you need to write your code like this:

#btn1, #btn2, #btn3
{
    background-color: #003399;
    color: #FFF;
}

#btn1 a:hover,
#btn2 a:hover, 
#btn3 a:hover
{
    color:#3cf;
}

In this case the color property will be applied to the a-tag in the#btn*-tags if the mouse hovers the a-tag.

It is also possible to apply the color property to the #btn*-tag if the mouse hover them:

#btn1:hover,
#btn2:hover, 
#btn3:hover
{
    color:#3cf;
}

You should read a Little bit more about CSS Selectors. There is a good overview on Wikipedia.

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{
}

CSS selector for multiple ids in one line (like [id=abc-1 - abc-10]:checked + label)

so you can do

[id^="abc-"]

which basically selects all elements which have an id attribute starting with abc-

---

Related Topics