Recently, I was working on an HTML frontend for a server-rendered application.

Naturally, I want to display temporary (“flash”) messages to the user. For example when confirming a form submission, or indicating an error. My first instinct is to turn to javascript. With javascript, this is a no-brainer. But I was trying to follow a “progressive enhancement” approach, which means I need to first implement without javascript.

Finding a Solution

So at this point, I turn to google:

how to close a div without javascript

The first result is actually quite helpful:

https://stackoverflow.com/questions/19170781/show-hide-divs-on-click-in-html-and-css-without-jquery

But, as is often the case, the accepted answer here is not quite the best answer.

Rather, the second answer is really what I was looking for.

input[type=checkbox]:checked + p {
    display: none;
}

That css snippet is referring to two adjacent siblings: an input and a p, and when the input is checked, the p will be hidden.

This is the exact behavior I wanted, but I needed to adapt it slightly…

CSS Selectors

When flashing the message, it is a div with some text and close button. Swapping in a checkbox for the button, it looks something like this:

<div id="flash-container"> 
    <p>Flash message here!</p>
    <input hidden type="checkbox" id="this-checkbox">
    <label for="this-checkbox">
        X
    </label>
</div>

Now, I want #this-checkbox to hide #flash-container. However, there is in fact no CSS selector for “the parent element”. Basically, #this-checkbox can’t affect the styling of #flash-container – they’d have to be siblings of some kind.

At this point, I started to think what I wanted just wasn’t possible.

HTML Flexibility

Luckily, to my surprise, I discover an input and its label do not have to be adjacent, nor be under the same parent.

So I can define my flash like so: even X

Now, when clicking on the label, #this-checkbox will change to the checked state, and we can make our CSS hide #flash-container when that happens:

input[type=checkbox]:checked + #flash-container {
    display: none;
}

Checkboxes can serve as CSS-only toggles! The input goes adjacent to the element to modify, and the clickable label can go anywhere!

You can even “componentize” this concept by using a class (like .close-on-check) instead of an id. Here’s a fiddle as an example:

https://jsfiddle.net/o47efsk9/53/