Hover style on innermost of nested spans

[mikevp]

I'm trying to write a page to display an expression with nested parentheses, and highlight each parenthesized part on hover.For instance:Expression (with parens ( and inner part) and more outerWhen the cursor is inside the inner parentheses, I want to highlight just the inner part.The following code works only for the outermost parentheses. When I'm hovering over the inner part, it highlights the entire span.

<style>    span.paren:hover {background: lightgray;}</style>Expression<span class="paren">  (with parens  <span class="paren">    ( and inner part)  </span>  and more outer)</span>

Is there a way to have the hover apply to only the innermost span the cursor is hovering over? Yeah, I could have classes p1 - pn for each nesting level with a different background color for each (since all spans matching the current cursor position trigger their hover) but I'm resorting to this because of some expressions with a whole lot of nesting levels, and the rainbow effect would obscure what I'm trying to make clear. Just a simple highlight of the single most local to the cursor parenthesized part is what I really want. (I'm trying to avoid resorting to javascript.)

[Ingolme]

It's not possible in CSS.

 

When you select span.paren:hover, you're selecting all spans with class "paren"

 

There's no selector that can select an element based on what other elements it contains, which is what would be necessary to make this possible in CSS.

[mikevp]

Thanks... I was afraid that was the answer.

[tejasamrute]

 span.paren span:hover {        background: lightgray;    }

with this code...it will only highlight (and inner part)

 

 

 

 

 

is this what are you looking for????