10

It's long been hailed as the answer to many selector problems, even disputed by some as entirely unnecessary, but the Selectors Level 4 pseudo-class :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 revision of the W3 Spec. Reason being that it's inefficient and already covered by JavaScript functionality.

Mulling over this, I've been thinking of how to fake this effect using pure CSS. Below I've provided one method, Q&A style, for achieving the effect as an answer, but would like to know if there are other methods. Specifically, more efficient CSS implementations, or responsive CSS implementations.

1
  • 4
    Note that it is still open to (and required for conformance in) implementations outside CSS, which means stuff like querySelectorAll() can potentially benefit without having to depend on jQuery.
    – BoltClock
    Jun 25, 2014 at 1:08

3 Answers 3

12

In Gecko and WebKit, certain selectors can “jump” using <label for> and an associated <input> element positioned anywhere. This works unreliably, but is still kind of 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 might have to click once if using Chrome.)

4
  • The checkbox hack strikes again - works in FF as well by the way Jun 24, 2014 at 18:53
  • @ZachSaucier: It’s a different one, though! I hope I’m the first to find it. … probably not.
    – Ry-
    Jun 24, 2014 at 18:55
  • @false Nice answer! I'll wait a bit to see if anyone else puts forward an answer; if not, this will get the checkmark for sure.
    – TylerH
    Jun 24, 2014 at 19:01
  • 6
    An explanation of some of my findings on this behavior and why it works in certain browsers and not others can be found here.
    – BoltClock
    Jun 25, 2014 at 1:09
1

This is an example of what I mentioned in comments – instead of the element that gets hovered over actually being a child element, it is a mere sibling that comes right before the element that should be affected – and the adjacent sibling combinator is used to affect the second element on hover of the first one,

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

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

Since it has no need for additional positioned elements “covering up” the second element, it does not suffer from the mentioned drawbacks, such as actual content in the second element not being accessible via mouse cursor for selection or other forms of interaction. Only the “triggering” element itself is positioned absolutely over the other one – instead of using absolute positioning, other methods to achieve that are possible as well, f.e. a negative margin-bottom.
(And I have introduced a “spacer” element to keep the content from being overlapped by the absolutely positioned element – that does not necessarily need an additional element, for example a pseudo element created using ::before would do as well.)

So again, this is also not a “parent selector” – just something that achieves a certain effect by using some positioning and other, broadly available selectors.

1
  • Same approach (minus the added filler text) as the version by Zach that I linked at the bottom of my answer earlier (this was originally my approach before my browser crashed and I lost my work), and good thing that it's not a parent selector, or it wouldn't be answering the question (which explicitly asks for implementations that fake the same effect as a parent selector. +1.
    – TylerH
    Jun 24, 2014 at 20:57
1

JSFiddle Example

For this method, I created a fixed-position container element of static size, with a single child element inside of it, taking up 200px by 200px.

Then, I added two absolutely-positioned elements (.glass1 and .glass2) to simulate glass panes ("You can look, but you can't touch"), and I used z-index on them so that they would cover the remaining space of the container element.

The addition of these glass panes is to simulate the effect of nothing happening unless you hover over the child. Otherwise this method wouldn't imitate parent selector behavior; it would just be a normal :hover implementation.

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

.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 its lack of responsiveness. A more-practiced hand might allow for some measure of responsiveness.

Edit: More efficient version by ZachSaucier

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.