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 :hovered div are also box-shadowing because they have the same signature. I can't change that because they're from an infinitely nested template.

pretty mouseover diagram yay

I thought I would just have to target any list item that's :hovered 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

You want to selectively target the div. Is there any unique DOM structure of the div elements which you want to target? i.e, are they children of an element with a specific ID that the other divs are not? — Keir Simmons, Aug 12 '14 at 21:44
As far as I know, there is no parent-targetting syntax available .. yet. — Daedalus, Aug 12 '14 at 21:44
Read up on [CSS Specificity](http://css-tricks.com/specifics-on-css-specificity/). — APAD1, Aug 12 '14 at 21:44
Can you post a jsfiddle of this nested template? Just inspect the element over the container and copy as html, and copy paste inside a jsfiddle. — Alessandro Incarnati, Aug 12 '14 at 21:45
I answered one question yesterday about specificity. Link http://stackoverflow.com/questions/25243620/prioritize-id-selector-over-an-id-and-class/25243983#25243983 Check it out :) — Alessandro Incarnati, Aug 12 '14 at 21:46
@AlexIncarnati I'm not entirely sure what you're trying to say — striking, Aug 12 '14 at 21:51
@ThatTreeOverThere This unfortunately, is not possible at CSS's current specification by w3.org. There is a possible spec in the works, but no idea if it will happen or not; you need javascript. — Daedalus, Aug 12 '14 at 21:58
Are you restricting yourself to CSS or can you make use of some javascript too? If you open the door to JavaScript there are a number of ways to accomplish this. — Randyaa, Aug 12 '14 at 22:01
@Randyaa If JavaScript will accomplish it then I guess I'll have to use it, but CSS was my target — striking, Aug 12 '14 at 22:09
So to clarify, if you hover a specific LI you want to drop-shadow the whole UL, but if you hover any other LI you don't want the drop shadow? — Randyaa, Aug 12 '14 at 22:38
@Randyaa I want to drop shadow the whole UL that is `:hovered` and _nothing else_ (like its parents) — striking, Aug 12 '14 at 22:39
@striking I managed to make [this](http://jsfiddle.net/vy3g5e64/4/), but it could use some work, unsure if I can do it though. — Daedalus, Aug 12 '14 at 22:55

score 0 · Answer 1 · answered Aug 12 '14 at 21:51

0

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

answered Aug 12 '14 at 21:51

Jafar Akhondali

1,490
1
11
23

It needs to be able to nest infinitely; unfortunately, I can't directly name the elements at play or give them classes because of this. – striking Aug 12 '14 at 21:52
This doesn't really answer the question; it's not that they want to specifically target one element, it's that they want to -not- target the parents, and only the underlying element. Your solution would mean giving everything and its mother an id. – Daedalus Aug 12 '14 at 21:52

score 0 · Answer 2 · answered Aug 12 '14 at 21:55

0

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/

answered Aug 12 '14 at 21:55

tcooc

18,644
3
34
53

They want to avoid selecting the parents; something which isn't possible at this moment. – Daedalus Aug 12 '14 at 21:56
1

I want the drop shadow to encapsulate the entire item, not just the text inside it. I know where to put my selector, tyvm. – striking Aug 12 '14 at 21:56
@Daedalus It's not possible? Really? – striking Aug 12 '14 at 21:57
@ThatTreeOverThere There is no parent selector in css3. There might be one in css4; here is the spec: http://dev.w3.org/csswg/selectors4/#relational Here is some further reading: http://stackoverflow.com/a/1014958/785241 – Daedalus Aug 12 '14 at 21:58
@ThatTreeOverThere Misinterpreted your question. Unfortunately, the only way I can think of implementing that is using javascript. – tcooc Aug 12 '14 at 22:04

score 0 · Answer 3 · edited May 23 '17 at 10:32

0

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

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

edited May 23 '17 at 10:32

Community

1
1

answered Aug 12 '14 at 22:10

Alessandro Incarnati

6,288
3
32
52

I want to select the _entire_ list, not just the text within. I want it to do what it's doing now, just not on every element in the tree. – striking Aug 12 '14 at 22:17
Alright, so which element you would like to select and which not? – Alessandro Incarnati Aug 12 '14 at 22:19
When I mouse over the top one, I want to select the container that contains everything. When I mouse over a lower level, I want to select that container and only that one, not the ones above it. – striking Aug 12 '14 at 22:22
But is the jsfiddle the template you are working on? it seems coming from an angular js app... – Alessandro Incarnati Aug 12 '14 at 22:30
It is. I just don't want to embed my entire app, because that's far from a [minimal example](http://sscce.org); I just dropped in the rendered form of it because that's all that's needed for the real effect – striking Aug 12 '14 at 22:31
Why you need to apply this box-shadow to this ul only? Can't you target other elements? If you are trying to know if it's possible to select the parent selector in CSS, it's not possible currently not even with the latest CSS3 specifications. – Alessandro Incarnati Aug 12 '14 at 22:38
I have edited my answer with a possible solution for you. Add the plugin https://github.com/Idered/cssParentSelector and in CSS you will be able to select also parent elements. – Alessandro Incarnati Aug 12 '14 at 22:45

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

3 Answers3