How can I select multiple IDs in CSS? For example:
#test_id_*{
}
<div id="test_id_10"></div>
<div id="test_id_11"></div>
How can I select multiple IDs in CSS? For example:
#test_id_*{
}
<div id="test_id_10"></div>
<div id="test_id_11"></div>
Use an attribute selector
on the id
attribute:
[id^='test_id_'] { color: red; }
Description:
[attr^=value]
represents an element with an attribute name ofattr
and whose first value is prefixed by "value".
To use one css
for multiple id
or class
, you need to separate them with ,
#test_id_10,
#test_id_11
{
//some style
}
.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>
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{
}
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
}
test_id_nnn
?
#test_id_10 { //your styling }
Here is the basics in W3 schools https://www.w3schools.com/cssref/sel_id.asp
test_id_
.