5

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

#test_id_*{

}
<div id="test_id_10"></div>
<div id="test_id_11"></div>
Saiful
  • 61
  • 1
  • 1
  • 4
  • Are the ID's generated through jquery or just different static id's on the page? – Syfer Apr 27 '17 at 03:58
  • 1
    Possible duplicate of [How to get CSS to select ID that begins with a string (not in Javascript)?](http://stackoverflow.com/questions/11496645/how-to-get-css-to-select-id-that-begins-with-a-string-not-in-javascript) –  Apr 27 '17 at 04:28

7 Answers7

21

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

9

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

#test_id_10,
#test_id_11
{
    //some style
}
Carl Binalla
  • 5,393
  • 5
  • 27
  • 46
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;
 }
Emad Dehnavi
  • 3,262
  • 4
  • 19
  • 44
1

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>
Community
  • 1
  • 1
Dalin Huang
  • 11,212
  • 5
  • 32
  • 49
0

You have to pass it like following

#test_id_10,#test_id_11{

}
Ousmane D.
  • 54,915
  • 8
  • 91
  • 126
honey
  • 53
  • 2
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
}
PRANSHU MIDHA
  • 472
  • 7
  • 13
  • 1
    How would I scale this to 100 elements with IDs of the form `test_id_nnn`? –  Apr 27 '17 at 04: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 }); }); – PRANSHU MIDHA Apr 27 '17 at 04:10
  • Why would somebody introduce jQuery to apply styling? Why not use pure CSS for this? – Nico Haase Oct 05 '20 at 12:01
-3
#test_id_10 { //your styling }

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

virat
  • 105
  • 10
  • 1
    The OP wants to know how to write a rule for **multiple** IDs which start with `test_id_`. –  Apr 27 '17 at 04:02