223

I know that there does not exist a CSS parent selector, but is it possible to style a parenting element when hovering a child element without such a selector?

To give an example: consider a delete button that when hovered will highlight the element that is about to become deleted:

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

By means of pure CSS, how to change the background color of this section when the mouse is over the button?

2

8 Answers 8

206

I know it is an old question, but I just managed to do so without a pseudo child (but a pseudo wrapper).

If you set the parent to be with no pointer-events, and then a child div with pointer-events set to auto, it works:)
Note that <img> tag (for example) doesn't do the trick.
Also remember to set pointer-events to auto for other children which have their own event listener, or otherwise they will lose their click functionality.

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}    
<div class="parent">
  parent - you can hover over here and it won't trigger
  <div class="child">hover over the child instead!</div>
</div>

Edit:
As Shadow Wizard kindly noted: it's worth to mention this won't work for IE10 and below. (Old versions of FF and Chrome too, see here)

6
  • 3
    Worth to mention this won't work for IE10 and below. (Old versions of FF and Chrome too, see here) May 3, 2017 at 7:22
  • 3
    Setting pointer events to none also means that event listeners on that element will not work..!
    – rhazen
    Sep 25, 2018 at 9:49
  • 1
    @rhazen you're absolutely right. Although from my experience this usage is usually connected to a single click area/element, so you can assign the click listener to the parent
    – guy_m
    Sep 26, 2018 at 0:29
  • How about if I have two-level, parent, child1, and child of child1. I added pointer-events none to parent and pointer-events auto to child. I want to hover to child1 except the child of child 1. Demo here: codepen.io/lion5893/pen/WNQgyVx May 15, 2020 at 6:46
  • this is a thumb up bro, i manage to css the parent when hover the child only, wp Feb 24, 2021 at 17:17
154

Well, this question is asked many times before, and the short typical answer is: It cannot be done by pure CSS. It's in the name: Cascading Style Sheets only supports styling in cascading direction, not up.

But in most circumstances where this effect is wished, like in the given example, there still is the possibility to use these cascading characteristics to reach the desired effect. Consider this pseudo markup:

<parent>
    <sibling></sibling>
    <child></child>
</parent>

The trick is to give the sibling the same size and position as the parent and to style the sibling instead of the parent. This will look like the parent is styled!

Now, how to style the sibling?

When the child is hovered, the parent is too, but the sibling is not. The same goes for the sibling. This concludes in three possible CSS selector paths for styling the sibling:

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

These different paths allow for some nice possibilities. For instance, unleashing this trick on the example in the question results in this fiddle:

div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}

Style parent image example

Obviously, in most cases this trick depends on the use of absolute positioning to give the sibling the same size as the parent, ánd still let the child appear within the parent.

Sometimes it is necessary to use a more qualified selector path in order to select a specific element, as shown in this fiddle which implements the trick multiple times in a tree menu. Quite nice really.

2
  • 1
    This is good for highlighting, but won't work if you try change font color, am I right? Jul 12, 2013 at 11:39
  • 1
    @JahanzebKhan Changing font color is no problem.
    – NGLN
    Jul 12, 2013 at 15:42
20

Another, simpler "alternate" approach (to an old question)..
would be to place elements as siblings and use:

Adjacent Sibling Selector (+) or General Sibling Selector (~)

<div id="parent">
  <!-- control should come before the target... think "cascading" ! -->
  <button id="control">Hover Me!</button>
  <div id="target">I'm hovered too!</div>
</div>
#parent {
  position: relative;
  height: 100px;
}

/* Move button control to bottom. */
#control {
  position: absolute;
  bottom: 0;
}

#control:hover ~ #target {
  background: red;
}

enter image description here

Demo Fiddle here.

1
  • 5
    worth noting that this only works it #targets comes after #control in the DOM (i.e. you can't affect previous siblings, only following siblings)
    – Gio
    Mar 16, 2020 at 10:41
13

there is no CSS selector for selecting a parent of a selected child.

you could do it with JavaScript

2
  • 3
    true. something like $(child).hover(function(){$(this).closest(parentSelector).addClass('hoverClass')}, function(){$(this).closest(parentSelector).removeClass('hoverClass')}); Jan 16, 2014 at 9:42
  • 14
    @AamirAfridi That's not pure JS though, you have to use jQuery with that.
    – Ivotje50
    Mar 22, 2015 at 14:29
11

As mentioned previously "there is no CSS selector for selecting a parent of a selected child".

So you either:


Here is the example for the javascript/jQuery solution

On the javascript side:

$('#my-id-selector-00').on('mouseover', function(){
  $(this).parent().addClass('is-hover');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover');
})

And on the CSS side, you'd have something like this:

.is-hover {
  background-color: red;
}
8

In 2022:

This can be now achieved with CSS only, using the :has pseudo-class and the following expression:

div:has(button:hover) {}

Here's a snippet showcasing the original proposition:

div:has(button:hover) {
  background-color: cyan;      
}
<div>
  <p>Lorem ipsum ...</p>
  <button>Delete</button>
</div>

See browser support here. At the time of writing, all major browser support it—except Firefox, which still has a flawed experimental implementation.

2
  • I would really LOVE to use it in production! I really hope Firefox will accept this in the future. When it comes to just cosmetic hover effects, only Firefox users will miss this impression, so if you have some cool stuff to show off, it'll always better to use it anyway :-) But when it's more critical in UI way, you should avoid it (for now unfortunately)
    – Hielke
    Sep 22, 2022 at 17:30
  • 1
    Per Bugzilla, they plan to work on it “in the first half of this year” [2023], so maybe Gecko will finally join in for complete support.
    – dakab
    Jan 13 at 7:24
3

This solution depends fully on the design, but if you have a parent div that you want to change the background on when hovering a child you can try to mimic the parent with a ::after / ::before.

<div class="item">
    design <span class="icon-cross">x</span>
</div>

CSS:

.item {
    background: blue;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.item span.icon-cross:hover::after {
    background: DodgerBlue;
    border-radius: 10px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}

See a full fiddle example here

-12

This is extremely easy to do in Sass! Don't delve into JavaScript for this. The & selector in sass does exactly this.

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

3
  • 10
    -1 Sass does not add more functionality to css, it just makes writing it easier. Anything you can do in sass can be done in css and visa versa.
    – Dastur
    Sep 1, 2016 at 7:01
  • 3
    @Dastur Given variables and mixins, I would say Sass adds an awful lot to CSS. You can do it all in CSS, in the same way you could still write sophisticated software using plain old C. Modern languages add a lot without enabling something that couldn't be done before. Same with Sass and CSS. Nov 1, 2016 at 9:11
  • 9
    @Cobus Kruger Your partially right, but you can't make that comparison. Whereas languages like c++ c# and javascript may be based off C, they do not turn into C before runtime. Sass is converted in css before runtime therefore your never truly loading a sass stylesheet, just a css one.
    – Dastur
    Nov 1, 2016 at 13:29

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