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'?