Changing styles for certain div based on their id

Question

I want to change the background color of <div>s of ids childDiv1 and childDiv4 only..how to do such kind of thing (note that the list of div may be a huge list and the the wanted div list is from an array) Eg:-> stylingdivs:{'childDiv1','childDiv4'} please help me with this

<div class="parentDiv">
  <div class="childDiv1342">
    First Div Child
  </div>
  <div class="childDiv2244">
    Second Div Child
  </div>
  <div class="childDiv3342">
    Third Div Child
  </div>
  <div class="childDiv4324">
    Fourth Div Child
  </div>
  `<div class="childDiv5324">
    Fifth Div Child
  </div>`
  `<div class="childDiv6324">
    Sixth Div Child
  </div>`
  `<div class="childDiv7323">
    Seventh Div Child
  </div>`
</div>

Possible duplicate of [Jquery change background color](https://stackoverflow.com/questions/4283141/jquery-change-background-color) — Matheus Cuba, Jun 28 '18 at 11:40

score 0 · Answer 1 · answered Jun 28 '18 at 11:41

Read over CSS .class Selector which will help you understand how selectors work in CSS.

Also, read over jQuery Multiple Selector.

$('.childDiv1, .childDiv4').css('background-color', 'cyan');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv">
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
  `<div class="childDiv5">
    Fifth Div Child
  </div>`
  `<div class="childDiv6">
    Sixth Div Child
  </div>`
  `<div class="childDiv7">
    Seventh Div Child
  </div>`
</div>

iLuvLogix · Answer 2 · 2018-06-28T11:48:24.850

0

Herre is a link to W3Schools CSS selector reference..

In your css simply put:

.parentDiv > .childDiv1, .childDiv4 {
background-color: #666666;
}

or just reference the child divs

.childDiv1, .childDiv4 {
background-color: #666666;
}

btw: you are using classes in your example, not ids..

edited Jun 28 '18 at 11:48

answered Jun 28 '18 at 11:41

iLuvLogix

5,920
3
26
43

score 0 · Answer 3 · answered Jun 28 '18 at 11:42

If you only need to have them statically, CSS is enough:

.childDiv1, .childDiv4 {
  background-color: your-color;
}

If they need to be changed dynamically, simple Javascript should work for this.

document.querySelectorAll(".childDiv1, .childDiv4").forEach(
  div => div.style.backgroundColor = "your-color");

score 0 · Answer 4 · answered Jun 28 '18 at 11:44

You say id so I change your html to be id

<div class="parentDiv">
  <div id="childDiv1">
    First Div Child
  </div>
  <div id="childDiv2">
    Second Div Child
  </div>
  <div id="childDiv3">
    Third Div Child
  </div>
  <div id="childDiv4">
    Fourth Div Child
  </div>
  `<div id="childDiv5">
    Fifth Div Child
  </div>`
  `<div id="childDiv6">
    Sixth Div Child
  </div>`
  `<div id="childDiv7">
    Seventh Div Child
  </div>`
</div>

<script>
 document.selectAll("#childDiv1, #childDiv4").style.backgroundColor = "red";

</script>

score 0 · Answer 5 · edited Jul 03 '18 at 07:20

0

Try this with jquery to give background color in 'childDiv1','childDiv4' with this situation no problem if the list of div may be a huge.

I think you want like this:

 $(document).ready(function(){
               var parentDiv = $('.parentDiv').find('div')
               $(parentDiv).eq(0).css('background','green');
               $(parentDiv).eq(3).css('background','green');
           })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv">
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
  `<div class="childDiv5">
    Fifth Div Child
  </div>`
  `<div class="childDiv6">
    Sixth Div Child
  </div>`
  `<div class="childDiv7">
    Seventh Div Child
  </div>`
</div>

edited Jul 03 '18 at 07:20

piet.t

11,718
21
43
52

answered Jun 28 '18 at 11:50

Rohit Verma

3,657
7
37
75

what if the `div` id is a random number(child div's) and those random IDs are saved in an array – Kalanka Jun 28 '18 at 11:53
but you are selecting the child `div`s directly which are under the `parentDiv` as `0` and `3`.is there a better way to catch them. – Kalanka Jun 28 '18 at 12:01
If id is a random then you can select with class instead of id or you can use `this()` – Rohit Verma Jun 28 '18 at 12:12

Changing styles for certain div based on their id

5 Answers5