Changing .css from an anchor link from another page?

Associate
Joined
5 Jan 2005
Posts
2,221
Location
Cyprus
Hi,

I have tried searching google for a solution but it keeps showing me unrelated stuff.

I have a link in the main page that goes to a specific part of a different page(same website). Can l, in some way change the .css of the target page if it's visited from that specific link on the main page? I know how to do it for an anchor tag in the same page but making it work on a different page is beyond me.

Thanks for your help :)
 
Associate
Joined
28 Mar 2019
Posts
1,117
Location
Channel Islands
There's quite a few ways of doing this, but not via Css.

You can however return an anchor tag with a different class/style from your server, which looks like what you want. To do this, you would want each link to have a get parameter on it which says which specific element on the page did so.
For example, off the top of my head and assuming PHP,

<php
if( isset($_GET["linkclicked"]) && trim($_GET["linkclicked"]) == '1' )
echo '<a class="clicked" href="mysite.com/myroute?linkclicked=1">'
else
echo '<a href="mysite.com/myroute?linkclicked=1">'
?>

Otherwise you can do a similar sort of think with JS, it takes more effort though.
You'd want to intercept <a> clicks, pervent default, and then putting something in a cookie or local storage. After that you Javascript redirect onto where the link would have gone. You then check in JS in the onload and apply the styling.

Something like
https://stackoverflow.com/questions/9945371/run-function-then-follow-link
Is a good start.
 
Last edited:
Soldato
Joined
28 Oct 2006
Posts
12,456
Location
Sufferlandria
I think your PHP server-side solution is probably the best way to do it but you can also do it in java without needing to set a cookie. You can use window.location to get the URL as a string and then search through it for the parameters.
 
Caporegime
Joined
18 Oct 2002
Posts
29,491
Location
Back in East London
java != javascript.

You can kind of do it with css only, if you give the body element of the target page an id, then add the id as the target fragment of the URL in the anchor tag.

Then you can use:

Code:
body:target {
    /* different css goes here */
}

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors

Note it doesn't need to be the body element, but you mentioned that you want the entire page to be different and not a specific portion.
 
Last edited:
Back
Top Bottom