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>