Indicate an "uncle" with css

Question

Is there a way to select an uncle of an element with css? Concretely, I am writing a GreaseMonkey script for pages which have entries of the following forms:

<ruby>
  <span class="under">
    <span class="wk_K">決</span>
  </span>
  <rt>き</rt>
</ruby>
<ruby>
  <span class="under">決</span>
  <rt>き</rt>
</ruby>

I want to hide every rt field that appears next to a wk_K field (unless I hover over the latter), i.e. above the first rt in the example above should be hidden, but not the second one.

Sometimes the <span class="under"> is not there, and then the adjacent sibling selector works fine:

ruby .wk_K + rt {visibility:hidden;}
ruby .wk_K:hover + rt {visibility:visible;}

How can I achieve the same effect when the wk_K field is nested in a <span class="under">, i.e. if I want to select the 'adjacent uncle'?

I think you'll need to use JavaScript or reformat your code. find() and closest() methods should get you where you need to go / but I'll be happy if there is a CSS solution. — sheriffderek, Sep 27 '15 at 21:28
@sheriffderek If css does not work, I will most likely remove all `under` tags with JavaScript. But css would be so much more elegant. — klimpergeist, Sep 27 '15 at 21:48
[There is no parent selector yet](http://stackoverflow.com/q/1014861/1529630). So you can't. — Oriol, Sep 27 '15 at 21:50
@Oriol I was hoping for something along the lines of `(.under.wk_K)+rt`, i.e. the neighbor of an `under` element that contains a `wk_K`, to circumvent the lack of a parent selector. — klimpergeist, Sep 27 '15 at 21:58
I think it makes sense to re-open this question now that CSS has the `:has` pseudo-class. Selecting an uncle/aunt is different from selecting a parent (especially for novices). — Merchako, Feb 14 '23 at 23:06

score 4 · Accepted Answer · edited Sep 28 '15 at 13:06

4

You have to use the under class here:

ruby .under + rt {visibility: hidden;}
ruby .under:hover + rt {visibility: visible;}

Because, the rt is a sibling of .under and also, there's no difference in using .under:hover or .wk_K: hover. And setting the height of .under to be 1em to not allow the rt:hover, which triggers the .under:hover.

Let me know if it doesn't work.

In your case, you are trying to use a parent selector, which is not supported in CSS 3, as well as CSS 4. So JavaScript or jQuery is your solution. I understand that you need to select .under only having the .wk_K in them.

You might need the following jQuery code, if interested.

$(".wk_K").closest(".under").addClass("rt-hover");

And in the CSS, if you can use this:

ruby .rt-hover + rt {visibility: hidden;}
ruby .rt-hover:hover + rt {visibility: visible;}

That would work for you.

edited Sep 28 '15 at 13:06

klimpergeist

343
1
12

answered Sep 27 '15 at 21:28

Praveen Kumar Purushothaman

164,888
24
203
252

In my example, that would hide both `rt` elements. But the second one should remain, because it is not next to a `wk_K`. I'll adapt the question to make that more explicit. – klimpergeist Sep 27 '15 at 21:38
@klimpergeist Have a look at my updated answer. – Praveen Kumar Purushothaman Sep 27 '15 at 22:21
Thanks. So there is no way to interpret the problem as "select the sibling of an `under` node that contains a `wk_K`"? Something like `(.under.wk_K)+rt`? – klimpergeist Sep 28 '15 at 04:54
@klimpergeist Nothing till now using pure CSS buddy... That's why I have also given a working JavaScript example. – Praveen Kumar Purushothaman Sep 28 '15 at 08:45

Indicate an "uncle" with css

1 Answers1