CSS pseudo selector :target and trigger source - html

Question

Having html code with several hash links (e.g.href="#login") and css using pseudo selector :target for animation, such as
#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 feature of conditional behavior, based on "source" of the trigger event.
Let's say the html code with
<a class="hidden" id="login"></a>
<div id="wrapper">
<div id="console" class="animate">
...
has somewhere also two links
<a id="link_1" href="#login">
and
<a id="link_2" href="#login">
both pointing to #login. Is it possible to modify css to have different behavior for each of links? In my case, is it possible by pure html and css to do different kinds of animation for both links?

Answer 1

No. :target is the only CSS selector of its type; for any other “behaviour”, you need JavaScript or something server-side.
The closest you can get is #login1 and #login2.

Answer 2

This isn't possible, as you ask it, since CSS has no capacity to conditionally-assess the source of the activity, and is only able to 'react' to the end-result, without the ability to reference the source of the action that 'caused' the :target selector to match.
That said, if you're able to change your HTML, and one of the links, you could approximate it:
<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 */
}
The problem, of course, is that this clearly doesn't directly cause the :target selector to match the relevant element in both cases, so the answer must remain, basically: 'no,' this is a case in which JavaScript is probably the only real solution to meet your needs.