How to get a hook on an element when another element (not a parent) is targeted

[rpk]

After rearranging a few html snippets in a menu pattern i ran into a tricky issue, and i am unsure if it is possible to solve in plain CSS at all. So far i’ve used the following selectors to colorize an icon font icon. In .toggler the general color is applied and on click if #togglenav is targeted the general color gets lightened:

.toggler {
    color:orange;
}

body:not(:target) #togglenav:target .toggler {
    color: lighten(orange, 25%);
}

The HTML before looked like the following:

<nav role="navigation">
    <ul class="navio" id="togglenav" tabindex="0">
            <li><a href="#togglenav" class="icon-alone toggler" title="Menu open and close">
                <span aria-hidden="true" data-icon="t"></span>
                <span class="screen-reader-text">Menu open and close</span></a>
           </li>
        --><li><a class="navbase" href="#nav1">Menu 1</a></li><!--
        --><li><a class="navbase" href="#nav2">Menu 2</a></li><!--
        --><li><a class="navbase" href="#nav3">Menu 3</a></li><!--
        --><li><a class="navbase" href="#nav4">Menu 4</a></li><!--
        --><li><a class="navbase" href="#nav5">Menu 5</a></li><!--
        --><li class="togglereset" aria-hidden="true"><a href="#top">Back to top</a></li>
    </ul>
</nav>

Now i moved out the “a” element of the .toggler class and placed it on the same level like the unordered list of #togglenav :

<nav role="navigation">
    <a href="#togglenav" class="icon-alone toggler" title="Menu open and close">
        <span aria-hidden="true" data-icon="t"></span>
        <span class="screen-reader-text">Menu open and close</span>
    </a>
    <ul class="navio" id="togglenav" tabindex="0">
            <li><a class="navbase" href="#nav1">Menu 1</a></li><!--
        --><li><a class="navbase" href="#nav2">Menu 2</a></li><!--
        --><li><a class="navbase" href="#nav3">Menu 3</a></li><!--
        --><li><a class="navbase" href="#nav4">Menu 4</a></li><!--
        --><li><a class="navbase" href="#nav5">Menu 5</a></li><!--
        --><li class="togglereset" aria-hidden="true"><a href="#top">Back to top</a></li>
    </ul>
</nav>

Now the problem is i am unable to get a hook on toggler when #togglenav is in a targeted state since #togglenav isn’t a parent of .toggler anymore – so the button stays orange all the time. The only way that i got the icon recolored as long as a mouseclick lasted was:

a.toggler:active

But that isn’t solving the problem. So is there an elegant CSS only way to redye .toggler as long as #togglenav is in a targeted state? I am out of ideas :s

Best regards Ralf

[Paulie_D]

Can you not move the ID to the nav instead of the ul?

Alternatively, I assume you are using JS/JQ to apply the toggler class so it might just be a case of editing that function.

[rpk]

I can give it a try, but i doubt it will work. Basically i would have more or less the same situation i was in before when the .toggler element was one li inside the ul, which implied some kind of position oddity… :/

And nope, there isn’t any JS or jQuery involved, it is CSS only…

[rpk]

I’ve received an approach for a working solution and wanted to post the answer in here too… If you put the “a” element of .toggler right after the ul of #togglenav then the following selector is possible which solves the initial problem:

#togglenav:target + .toggler

[Author]

Posts