How can I select multiple IDs in CSS? For example:
#test_id_*{
}<div id="test_id_10"></div>
<div id="test_id_11"></div>
-
Are the ID's generated through jquery or just different static id's on the page?Syfer– Syfer2017-04-27 03:58:47 +00:00Commented Apr 27, 2017 at 3:58
-
1Possible duplicate of How to get CSS to select ID that begins with a string (not in Javascript)?user663031– user6630312017-04-27 04:28:28 +00:00Commented Apr 27, 2017 at 4:28
Add a comment
|
7 Answers
Use an attribute selector
on the id attribute:
[id^='test_id_'] { color: red; }
Description:
[attr^=value]represents an element with an attribute name ofattrand whose first value is prefixed by "value".
Comments
To use one css for multiple id or class, you need to separate them with ,
#test_id_10,
#test_id_11
{
//some style
}
Comments
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>
Comments
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;
}
You have to pass it like following
#test_id_10,#test_id_11{
}
1 Comment
Nico Haase
No, that won't scale for additional IDs
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 Comments
PRANSHU MIDHA
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 }); });
Nico Haase
Why would somebody introduce jQuery to apply styling? Why not use pure CSS for this?
#test_id_10 { //your styling }
Here is the basics in W3 schools https://www.w3schools.com/cssref/sel_id.asp
