CODEWITHSUNDEEP
css
Saiful
Saiful

Reputation: 71

How to select multiple ids in CSS?

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

#test_id_*{

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

Upvotes: 6

Views: 28647

Answers (7)

Emad Dehnavi
Emad Dehnavi

Reputation: 3451

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

Upvotes: 2

PRANSHU MIDHA
PRANSHU MIDHA

Reputation: 472

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
}

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

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>

Upvotes: 2

honey
honey

Reputation: 53

You have to pass it like following

#test_id_10,#test_id_11{

}

Upvotes: 0

virat
virat

Reputation: 105

#test_id_10 { //your styling }

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

Upvotes: -3

user663031
user663031

Reputation:

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

Upvotes: 22

Carl Binalla
Carl Binalla

Reputation: 5401

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

#test_id_10,
#test_id_11
{
    //some style
}

Upvotes: 9

Related Questions