How can I change the background color of certain div when clicking on a checkbox with css only?-CodePudding

I want to change the innerCircle's background-color when clicking a checkbox with css only. How can I access the innerCircle div?

<section>

      <label  for="select1">
          <input id="select1" type="checkbox">
          <span ></span>
      </label>

      <div >

          <div id='chh' >

              <div ></div>
          </div>

          <div >

              <div ></div>
              <div ></div>


              <div ></div>
              <div ></div>


              <div ></div>

              <div ></div>



          </div>

      </div>
  </section>

CodePudding user response：

move your wanted element after that checkbox and you can get access by css pseudo element like this example

//Css part

input:checked ~ .innerCircle {
    background: red;
}

//Html part

<section>

  <label  for="select1">
      <input id="select1" type="checkbox">
      <span ></span>
      <div id="chh" >
          <div ></div>
      </div>
  </label>

  <div >
      <div >

          <div ></div>
          <div ></div>


          <div ></div>
          <div ></div>


          <div ></div>

          <div ></div>
      </div>
  </div>
</section>

CodePudding user response：

As others mentioned, with your current html order that's impossible with css. You need to put the checkboxes before your target elements in html (upper from them).

Here's an example(width css): but I don't recommend you to code like this, try doing it with js it's way better

.outerCircle {
  display: flex;
  flex-direction: column;
  background: darkgrey;
  width: 100%;
  height: 500px;
}
.innerCircle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: blue;
  width: inherit;
  height: 300px;
}
.catBody {
  background: darkblue;
  width: inherit;
  height: 300px;
}
.sun {
  background: yellow;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

/* moves all checkboxes to bottom of the page to make it look better*/
#innerCircleColor,
#catBodyColor,
#sunColor {
  position: fixed;
  /* margin from bottom of page */
  bottom: 10px;
}
#innerCircleColor {
  /* margin from left of page */
  left: 0;
}
#catBodyColor {
  /* margin from left of page */
  left: 100px;
}
#sunColor {
  /* margin from left of page */
  left: 190px;
}
/* moves all checkboxes to the bottom of page to make it look better*/

/* adding label to each checkbox to know which element it belongs */
#innerCircleColor::after {
  content: "inner circle";
  position: absolute;
  left: 20px;
  white-space: nowrap;
}
#catBodyColor::after {
  content: "cat body";
  position: absolute;
  left: 20px;
  white-space: nowrap;
}
#sunColor::after {
  content: "sunColor";
  position: absolute;
  left: 20px;
  white-space: nowrap;
}
/* adding label to each checkbox to know which element it belongs */

/* changes background color of each element when its checkbox is checked */

/* selector (~) only selects the elements that are placed after our checkboxes and are in the same parent(it cant select their children).
for example if you try s.th like this #catBodyColor:checked~.neck it won't        work! */
#innerCircleColor:checked~.innerCircle {
  background: green;
}
#catBodyColor:checked~.catBody {
  background: darkgreen;
}
#sunColor:checked~.sun {
  background: yellowgreen;
}
/* changes background color of each element when its checkbox is checked */

<section>
  <div >
    <!-- attention how the checkboxes are placed upper from target elements -->
    <input id="innerCircleColor" type="checkbox" />
    <input id="catBodyColor" type="checkbox" />
    <!-- attention how the checkboxes are placed upper from target elements -->

    <div id="chh" >
      <input id="sunColor" type="checkbox" />
      <div ></div>
    </div>

    <div >
      <div ></div>
      <div ></div>

      <div ></div>
      <div ></div>

      <div ></div>

      <div ></div>
    </div>
  </div>
</section>

Here's the example with js :

// selects the checkboxes
const innerCircleCheckbox = document.querySelector('#innerCircleColor');
const catBodyCheckbox = document.getElementById('catBodyColor');
const sunCheckbox = document.getElementById('sunColor');

// selects the elements
const innerCircle = document.querySelector('.innerCircle');
const catBody = document.querySelector('.catBody');
const sun = document.querySelector('.sun');

// this part runs every time the checkbox changes
innerCircleCheckbox.addEventListener('change', () => {
  // checks if the checkbox is checked and ...
  if (innerCircleCheckbox.checked) {
    // changes the color of the wanted element
    innerCircle.style.background = 'green';
  }
  // checks if the checkbox is not checked and ...
  else {
    // removes the style to revert color of element to its default color
    innerCircle.removeAttribute('style');
  }
});
catBodyCheckbox.addEventListener('change', () => {
  if (catBodyCheckbox.checked) {
    catBody.style.background = 'darkgreen';

  } else {
    catBody.removeAttribute('style');
  }
});
sunCheckbox.addEventListener('change', () => {
  if (sunCheckbox.checked) {
    sun.style.background = 'yellowgreen';

  } else {
    sun.removeAttribute('style');
  }
});

.outerCircle {
  width: 100%;
}

.innerCircle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: blue;
  width: inherit;
  height: 300px;
}

.catBody {
  background: darkblue;
  width: inherit;
  height: 300px;
}

.sun {
  position: relative;
  background: yellow;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.container {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  margin: 0 25%;
  border-radius: 10px;
  color:white;
}

<section>
  <div >
    <div id="chh" >
      <div ></div>
    </div>

    <div >
      <div ></div>
      <div ></div>

      <div ></div>
      <div ></div>

      <div ></div>

      <div ></div>
    </div>
  </div>
</section>

<div >
  <label  for="innerCircleColor">
        <input id="innerCircleColor" type="checkbox" />
        <span >inner circle</span>
      </label>

  <label  for="catBodyColor">
        <input id="catBodyColor" type="checkbox" />
        <span >cat body</span>
      </label>

  <label  for="sunColor">
        <input id="sunColor" type="checkbox" />
        <span >sun</span>
      </label>
</div>