CSS pseudo-selector: target and trigger source

Question

Having code htmlwith multiple hash links (like href="#login") and css using a pseudo selector :targetfor animation like

#login:target ~ #wrapper #console {
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-name: scaleOut;
    -moz-animation-name: scaleOut;
    -o-animation-name: scaleOut;
    -ms-animation-name: scaleOut;
    animation-name: scaleOut;
}

I would like to add a conditional behavior function based on the "source" of the trigger event.

Let's say the code htmlwith

<a class="hidden" id="login"></a>
<div id="wrapper">
  <div id="console" class="animate">
...

has somewhere else two links

<a id="link_1" href="#login">

and

<a id="link_2" href="#login">

both point to #login. Is it possible to change cssto have different behavior for each of the links? In my case, is it possible to clean htmland cssmake different types of animation for both links?

Answer 1

, , CSS "" , , "" :target.

, HTML- , :

    <a id="link_1" href="#hidden">Link One</a>

    <a id="link_2" href="#login">Link Two</a>

    <div id="hidden"></div>
    <a class="hidden" id="login"></a>

    <div id="wrapper">
        <div id="console" class="animate">
    </div>

You can target differently:

#hidden:target + #login {
    /* style, or trigger animation */
}

#login:target {
    /* style, or trigger different animation */
}

, , , , :target , : "", , , JavaScript - , .

Answer 2

. :target - CSS ; "" JavaScript - .

#login1 #login2.