Issue
I'm trying changing a CSS class property by checking a checkbox, but it doesn't work... Can you help me?
My code:
<body>
<style>
#test:checked~#title {
display: none;
}
.reverse-flexbox {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}
</style>
<div>
<div class="reverse-flexbox">
<h1 id="title">Just a text</h1>
sky is blue
</div>
<div class="reverse-flexbox">
<h1 id="title">Just a text</h1>
i like stackoverflow
</div>
<input type="checkbox" id="test" />
<h1 id="title">Just a text</h1>
<div>Something else</div>
</div>
</body>
</html>
Solution
~ only works for the downward siblings which are below the element #test. #title is above #test, so that's why your styles do not apply.
If you don't want to change element positions, and still want to use ~, you can move #title up for style application, and then use the reverse directions of the flexbox to show #title is above #test (only in display).
For multiple h1 case, you also need to add them below #test checkbox
<html lang="pt-br">
<body>
<style>
#test:checked~div > #title {
display: none;
}
.reverse-flexbox {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}
</style>
<div>
<div class="reverse-flexbox">
<input type="checkbox" id="test" />
<div>
<h1 id="title">Just a text 1</h1>
</div>
<div>
<h1 id="title">Just a text 2</h1>
</div>
<div>
<h1 id="title">Just a text 3</h1>
</div>
</div>
<div>Something else</div>
</div>
</body>
</html>Answered By - Nick Vu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.