I have the following code:
<!DOCTYPE html>
<html>
<head>
<style>
main>section input:nth-of-type(1):checked {
display:block;
width:20px;
height:20px;
}
figure {
display:block;
width:200px;
height:200px;
background:green;
}
main>section input:nth-of-type(1):checked ~ figure,
main>section input:nth-of-type(1):checked ~ main>section figure {
background:blue;
}
</style>
</head>
<body>
<main>
<section>
<figure></figure>
<input type="checkbox" />
</section>
</main>
</body>
</html>
When someone checks the input field, i want the figure to turn blue. But something is wrong with my sibling select, so it stays green. Does anyone know what's wrong?
I will have a lot of other figures in other element tags, so it's important that none of the other figures change colors in anyway.