CSS Parent Selector – Previous CSS

Many people in the world of CSS want to have a parent selector. It is complicated and we understand it if browsers did not implement it.

On the other hand, something that may work and could also be useful is what we call a Previous Parent selector.

CSS Parent

CSS Parent

Since CSS is fundamentally read from right-to-left, and from present element to the top element, it should be achievable to find a child element of a parent element that has before now rendered its children.

Visualize the following HTML structure:

Web CSS

Web CSS

Take no notice of the lack in closing tags, as the nit-picker in you may be so prone to mention. This is just to get a feel of the documented structure.

How can we effect a change on the DIV with a class of option if they are child of a sibling element? The Previous Parent selector would agree to drilling down into earlier rendered parents.

 

Web CSS

Web CSS

You will notice the usage of <+ as indication that the input:checked should be the direct child of the DIV. The usage of <~ is an indication that the input:checked should be a offspring (on any level) of the DIV.

The fact that those elements need to appear ahead of the current element does limit the efficiency of this but would tolerate for more difficult interactions to be articulated in CSS that aren’t at this time possible.

News & Latest Posts

Our Address & Contact

Company Web Design

7111 Syntex Drive, 3rd Floor
Mississauga, Ontario L5N 8C3