6

How can I select multiple IDs in CSS? For example:

#test_id_*{

}
<div id="test_id_10"></div>
<div id="test_id_11"></div>

2

7 Answers 7

22

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

0
9

To use one css for multiple id or class, you need to separate them with ,

#test_id_10,
#test_id_11
{
    //some style
}
0
2

If they have the same style, then why can't they have the same class?

.iknow{
  width: 50px;
  height:50px;
  background-color: aqua;
  border: 1px solid red;
  display: inline-block;
}
<div id="test_id_10" class="iknow"></div>
<div id="test_id_11" class="iknow"></div>
<div id="test_id_12" class="iknow"></div>
<div id="test_id_13" class="iknow"></div>
<div id="test_id_14" class="iknow"></div>
<div id="test_id_15" class="iknow"></div>
<div id="test_id_16" class="iknow"></div>
<div id="test_id_17" class="iknow"></div>
<div id="test_id_18" class="iknow"></div>
<div id="test_id_19" class="iknow"></div>
<div id="test_id_20" class="iknow"></div>
<div id="test_id_21" class="iknow"></div>

2

If you want add same style to multi div, it's better to use class, but if you have your own reason for this, the better way is to wrap all your div's on one div:

<div class="wrap">
  <div id="id1">
    <p>
      First Div!
    </p>
  </div>
  <div id="id2">
     <p>
        Second Div!
     </p>
   </div>
  <div id="id3">
    <p>
      Third Div!
    </p>
  </div>
</div>

and set your style like this in your CSS:

.wrap > div {
  color:blue;
 }
1
  • This will work only for properties which are inherited.
    – user663031
    Commented Apr 29, 2017 at 12:01
0

You have to pass it like following

#test_id_10,#test_id_11{

}
1
  • No, that won't scale for additional IDs
    – Nico Haase
    Commented Oct 5, 2020 at 12:01
0

You can separate them by commas to apply css on multiple ids.

<div id="test_id_10"></div>
<div id="test_id_11"></div>

You can select them by:

#test_id_10, #test_id_11 {
// your css values
}
3
  • 1
    How would I scale this to 100 elements with IDs of the form test_id_nnn?
    – user663031
    Commented Apr 27, 2017 at 4:03
  • You can use class if you want to apply same css to all elements. But if you want to use multiple ids, you can use jquery for selecting multiple ids with same pattern. $(function() { $("input[id^='test_id_']").test_id_({ // your css }); }); Commented Apr 27, 2017 at 4:10
  • Why would somebody introduce jQuery to apply styling? Why not use pure CSS for this?
    – Nico Haase
    Commented Oct 5, 2020 at 12:01
-3
#test_id_10 { //your styling }

Here is the basics in W3 schools https://www.w3schools.com/cssref/sel_id.asp

1
  • 1
    The OP wants to know how to write a rule for multiple IDs which start with test_id_.
    – user663031
    Commented Apr 27, 2017 at 4:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.