## Demo

This is a message.
Check me to make the message preceding this checkbox appear.

## What's this?

This pen was created to demonstrate how `:has()` can be used to flip the checkbox and div sibling dynamic. Usually, because of how CSS is, we would have to have the checkbox precede the div to pull off some pure CSS tricks. But here, we could have the div precede the checkbox and, ideally, use `:has()` to determine whether or not the input checkbox sibling is checked and then apply some styling based on that.*

* As always, this is just an emulation of `:has()` powered by EQCSS .

## CSS Code what-if

This section contains a rough idea as to how the CSS code would look if `:has()` were supported.

    	.message {
    		background: #bef;
    		border: 4px solid rgba(0, 0, 0, .5);
    		padding: 8px;
    		opacity: 0;
    		transition: all .25s;
    	}
    	.message:has(~ .check:checked) {
    		opacity: 1;
    	}

An alternative way of going about this would be...

    	.message {
    		/* [...], see last block of code */
    	}
    	#demo:has(> .check:checked) .message {
    		opacity: 1;
    	}

## References

- Selectors Level 4 - Relational pseudo-class :has() on CSSWG
- CanIUse :has()? (Supported by zero browsers)
- :has() on MDN

- Old pen on checkboxes and divs
- My other :has() pens

- Emulating :has() by Tom Hodgins
- Powered by Element Queries CSS