Recently, I have been experimenting with CSS to blur NSFW images in a chatroom until they are hovered over. I have successfully accomplished this task and now my next goal is to implement checkboxes that can toggle the display of these images. I am aware of the CSS changes needed to achieve this, but I am unsure if it's possible to target a different element that is not a child of the checkbox using :checked.
Here is an example of what I have attempted:
.hide-nsfw:checked {
img[src$="#nsfw"] {
filter: unset;
}
}
To provide context, here is a simple layout without any styling:
<html>
<body>
<div class="chat-messages">
<div class="message-id-goeshere">
<img src="http://someimage.com/image.jpg#nsfw" />
</div>
</div>
<div class="configuration">
<input type="checkbox" class="hide-nsfw" />
</div>
</body>
I understand that achieving this in JavaScript is possible, however, I prefer to stick with pure CSS if feasible. Without utilizing CSS extensions, is there a way to select another element entirely? Although CSS3 does not support parent selectors, I'm curious if there is a workaround for this scenario.