How do I only target the :hovered element and none of its parents in CSS?

Question

So I have nested divs. When I mouseover a div, I want that div and no other div to get a box-shadow . Unfortunately the parents of the :hover ed div are also box-shadow ing because they have the same signature. I can't change that because they're from an infinitely nested template.

I thought I would just have to target any list item that's :hover ed with the box-shadow and then target its parents to prevent them from expressing box-shadow but I couldn't figure out how to express this in CSS:

ul:hover{
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

<some statement..?>{
  box-shadow: none;
}

EDIT: This is a JSFiddle of my thing

Answer 1

You can do that by specify an id for your element :

<style type="text/css">
div[id='child']:hover{
background-color:purple;
}

</style>

<div id='parent'>

Hello<br>
<div id='child'>hi<div>

</div>

jsfiddle example

Answer 2

You are not selecting the right elements. Use:

span:hover {
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

Fiddle: http://jsfiddle.net/vy3g5e64/1/

Answer 3

In case you have a nested template of which you cannot modify its structure, you can always use css specificity in order to override the visual effect on hover (adding a box shadow).

I see you have ul:hover { box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12); } ul:hover { box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12); }

and you would like to avoid that it's applied to all the li, right?

You should apply to each single li instead of ul, and in case you need to override some property without being able of modify the structure adding ids or classes in html, you could use specificity to override some properties.

For example if you want to override

 ul:hover{
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

you could be more specific and adding a parent element to the selectors, like:

div ul:hover{
   box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

Check here about how specificity works. Prioritize id selector over an id and class

EDIT

After noticing the added jsfiddle:

Just select the li element instead but:

ul li:hover{
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

You have a span after the div in your jsfiddle. Then you could simply target the span and add display block and 100% width to it to give a similar box-shadow to the one applied to the li:

ul li span:hover{
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

span{ display:block; width:100%; }

In case you need to target a parent element there is no selector available with the current CSS3 specifications. You could use this CssParentSelector jQuery plugin as workaround and be able to select a parent element in CSS: https://github.com/Idered/cssParentSelector