How to style the parent element when hovering a child element?

Question

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 giv

Answer 1

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

So you either:

• use a CSS hack as described in NGLN's answer
• use javascript - along with jQuery most likely

---

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;
}