Yesterday evening I was bored at home (as usual) and the weather was cold (as usual) so I decided to spend some time fixing some bug on this site.
I linked the “contact” link in the navigation to the contact section in the footer. My friend Marco suggested me that this way was not clear on how to find to contact so I looked for a solution, which I founded in the :target pseudo selector.
How :target work is pretty simple, it just matches the selector id with the hash in the url. So if you have a url like this mysite.com/#contact you can style your element with #contact:target. And so I did for the email link in the footer and highlight the email link in bold-red when matching the target.
Of course keep in mind that is something that would never end up in production but it was fun to play with it. Highliting the section I think is ok to use it, as it is just an enhancement. :D
Go to example : Off Canvas with only Css using the :target pseudo selector