Faking: has () a "parent selector" using only CSS

Question

This has long been seen as an answer to many selector problems, even disputed by some as completely unnecessary, but a pseudo-class of 4th level selectors :has() , better known as the parent selector , is the only one from level 4 that will not be implemented in CSS, according to the latest version W3 specifications . The reason is that it is inefficient and already covered in JavaScript functionality.

Thinking this through, I was thinking about how to fake this effect using pure CSS. Below I have provided one Q & Style method to achieve the effect as an answer, but would like to know if there are other methods. In particular, more efficient CSS implementations or adaptive CSS implementations.

Answer 1

In Gecko and WebKit, certain selectors can jump using the <label for> and the associated <input> element located anywhere. This works unsatisfactorily, but still fun.

 #before { left: -9999px; position: absolute; } #parent { padding: 0.5em; } #before:hover + #parent { background-color: #123; color: white; } #label { border: 0.1em solid #678; border-radius: 0.2em; display: inline-block; padding: 0.5em; } 

 <input type="checkbox" id="before"> <div id="parent"> <label for="before" id="label">Hover over me!</label> </div> 

(You may need to click once when using Chrome.)

Answer 2

JSFiddle example

For this method, I created a container element of a fixed position of static size with one child element inside it, occupying 200px by 200px.

Then I added two absolutely positioned elements ( .glass1 and .glass2 ) to simulate glass panels (“You can watch, but you cannot touch”), and I used z-index on them so that they cover the remaining space of the container element.

Adding these glass panes is to simulate the effect of nothing happening if you do not hover over the child. Otherwise, this method will not mimic the behavior of the parent selector; it will be just a normal implementation :hover .

At this point, it is just a matter of adding a property :hover to the container that did not affect the area covered by the child.

 .container { background: lavender; top: 0; left: 0; position: absolute; width: 600px; height: 400px; z-index: 0; border: 1px solid black; } .glass1 { width: 400px; height: 200px; position: absolute; left: 200px; top: 0; z-index: 2; } .glass2 { width: 600px; height: 200px; position: absolute; z-index: 3; top: 200px; left: 0; } .hover { background: lightblue; width: 200px; height: 200px; margin: 0; position: absolute; } .container:hover:not(.hover) { background: seagreen; } 

 <div class="container"> <div class="hover">Hover over me. Change my parent.</div> </div> <div class="glass1"></div> <div class="glass2"></div> 

The obvious problem with this implementation is its static nature and lack of reaction. A more practical hand may allow some degree of responsiveness.

Edit: More efficient version from ZachSaucier

Answer 3

This is an example of what I mentioned in the comments - instead of the element that hangs over the actual child element, it’s just a sibling that comes right in front of the element that needs to be touched - and the adjacent sibirin combinator is used to influence the second element on hover the first

 .hover:hover ~ .container { background: red; } 

http://jsfiddle.net/95HKP/5/embedded/result/

Since it does not need additional positioned elements to “cover” the second element, it does not suffer from the mentioned drawbacks, such as the actual contents in the second element, inaccessible with the mouse cursor for selection or other forms of interaction, only the “start” element is positioned absolutely above the other - instead of using absolute positioning, other ways to achieve this, i.e. negative margin-bottom .
(And I introduced the "spacer" element so that the content does not overlap with an absolutely positioned element - this does not necessarily require an additional element, for example, a pseudo-element created using ::before ).

So, this is also not a “parent selector” - it is just something that achieves a certain effect using some positioning and other widely available selectors.