I’m trying changing a CSS class property by checking a checkbox, but it doesn’t work… Can you help me?
My code:
<html lang="pt-br">
<body>
<style>
#test:checked~#title {
display: none;
}
</style>
<h1 id="title">Just a text</h1>
<input type="checkbox" id="test" />
</body>
</html>
>Solution :
You have to use input tag first then you can use another html tag to make checked pseudo class working and you can use flexbox to order the html tags.
.form_group{
display: flex;
flex-direction: column;
}
#test{
order: 2;
}
#title{
order: 1;
}
#test:checked~#title {
display: none;
}<div class="form_group">
<input type="checkbox" id="test" />
<h1 id="title">Just a text</h1>
</div>