All geek questions in one place

. The current CSS link style only works on the first page and does not go to another

So, the css that I have for both html pages, however, the current link style only works on the first page and does not go to the second page when clicked. Do you know why this would be?

css that handles the current link style

li.current > a:link { border-bottom: 0.3px solid #000000; }

First html page (working on this)

 <!--Header--> <header class="boxed" id="header-white"> <div class="header-margin"> <div class="logo"><a class="ajax-link" href="index-2.html">DAVIT AVOYAN</a></div> <ul class="header-nav"> <li class = "current"><a class="ajax-link" href="index-2.html">UX PORTFOLIO</a></li> <li><a class="ajax-link" href="about-me.html">About me</a></li> </ul>

2nd html page (works on this only if it opens first)

 <!--Header--> <header class="boxed" id="header-white"> <div class="header-margin"> <div class="logo"><a class="ajax-link" href="index-2.html">DAVIT AVOYAN</a></div> <ul class="header-nav"> <li><a class="ajax-link" href="index-2.html">UX PORTFOLIO</a></li> <li class = "current"><a class="ajax-link" href="about-me.html">About me</a></li> </ul>
+1
source share
2 answers

Please try below css for a link on the second page. You need to put the property "a: visited".

 <style type="text/css"> li.current > a:link { border-bottom: 0.3px solid green; color: red; } li.current > a:visited { border-bottom: 0.3px solid green; color: red; } </style>
+2
source

The behavior you see is expected. Class pseudo-class :link refers to links that have never been visited. By definition, the user had to click on the link to the current page to go to it, so it would not be selected :link .

You need to use li.current > a:visited .

0
source

Source: https://habr.com/ru/post/1238616/

More articles:


All Articles