Previous Parent

Plenty of people in the CSS world want a parent selector. It’s complicated and I understand it if browsers didn’t implement it.

However, something that could work and could be useful is what I call the Previous Parent selector.

Since CSS is essentially read from right-to-left, and from current element to top element, it should be possible to find a child element of a parent element that has already rendered its children.

Imagine the following HTML structure:

<div class="A">
<label>
<input>
</div>
<div class="B">
<div>
<label>
<input>
</div>
</div>
<div class="option">
<label>
<input>
</div>

Ignore the lack of closing tags, as the pedant in you may be so inclined to mention. This is just to get a sense of the document structure.

How can we effect change on the DIV with the class of option if they’re children of a sibling element? The Previous Parent selector would allow drilling down into previously rendered parents.

.option { display:block; }
/* clicking on A > input would hide the option */
input:checked <+ div ~ .option { display:none; }
/* clicking on B > div > input would hide the option */
input:checked <~ div ~ .option { display:none; }

You’ll notice the use of <+ to indicate that the input:checked should be the immediate child of the DIV. The use of <~ indicates that the input:checked should be a descendant (at any level) of the DIV.

The fact that the elements need to appear before the current element does limit the effectiveness of this but would allow for more complicated interactions to be expressed in CSS that aren’t currently possible.