# How to change styling of a link which is leads to the page that is currently open?

**URL:** <https://forum.pinegrow.com/t/how-to-change-styling-of-a-link-which-is-leads-to-the-page-that-is-currently-open/6553>\
**Category:** Styling (CSS)\
**Tags:** bootstrap5\
**Created:** [May 19, 2022, 6:09pm UTC](https://forum.pinegrow.com/t/how-to-change-styling-of-a-link-which-is-leads-to-the-page-that-is-currently-open/6553 "2022-05-19T18:09:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pgrowbig](https://avatars.discourse-cdn.com/v4/letter/p/7ba0ec/32.png) [@pgrowbig](https://forum.pinegrow.com/u/pgrowbig)\
**Post date:** [May 19, 2022, 6:09pm UTC](https://forum.pinegrow.com/t/how-to-change-styling-of-a-link-which-is-leads-to-the-page-that-is-currently-open/6553/1 "2022-05-19T18:09:40Z")

</div>

0

I am trying to do something very simple… I want links with the class of PAGE-MENU-LINK to be always black which I succeeded in doing. I also want the link which leads to the page on which it is being viewed on to have a line through the middle. In this part, I partially succeeded… The link only has a line through it while I hold down the mouse over it. I want the link to have a line through the middle of it when you hold the button down, and after you click on the page… I would prefer to stick to just CSS and HTML and possibly Javascript… Please not PHP…

**a.PAGE-MENU-LINK:current** does not work the way I thought it would… I am using Pinegrow with Bootstrap

Here is my **style.css**

```auto

a.PAGE-MENU-LINK:active {
    text-decoration: line-through;
    //color: rgb(0, 0, 0);
}

a.PAGE-MENU-LINK:current {
    text-decoration: line-through;
    //color: rgb(0, 0, 0);
}

a.PAGE-MENU-LINK {
    text-decoration: none;
    color: rgb(0, 0, 0);
}

```

and here is my HTML

`<a href="about.html" class="ACTIVE-MENU-LINK PAGE-MENU-LINK">ABOUT</a>`

Thanks!

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [May 20, 2022, 11:48pm UTC](https://forum.pinegrow.com/t/how-to-change-styling-of-a-link-which-is-leads-to-the-page-that-is-currently-open/6553/2 "2022-05-20T23:48:34Z")

</div>

@pgrowbig the pseudo selector :local-link should do the trick BUT it doesn’t seem to be supported in Chrome (and possibly other major browsers): [:local-link - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:local-link)

The only way I can think of is using JavaScript code, for example, by adding a special class to all local links and then using that class in the selector:

```auto
<script>
    // add to the end of the document
    var links = document.querySelectorAll('a[href]');
    var page_url = window.location.href.split(/[\?\#]/)[0];
    for(var i = 0; i < links.length; i++) {
        if(links[i].href.startsWith(page_url)) {
            links[i].classList.add('local-link');
        }
    }
</script>

<style>
   a.local-link { ... }
</style>

```

---

<div class="post-metadata">

**Author:** ![pgrowbig](https://avatars.discourse-cdn.com/v4/letter/p/7ba0ec/32.png) [@pgrowbig](https://forum.pinegrow.com/u/pgrowbig)\
**Post date:** [May 28, 2022, 7:04pm UTC](https://forum.pinegrow.com/t/how-to-change-styling-of-a-link-which-is-leads-to-the-page-that-is-currently-open/6553/3 "2022-05-28T19:04:53Z")

</div>

So I’ve been going crazy on why this doesn’t work but I think I figured it out, just need a little bit of guidance…

FYI i used a class called **AG-CURRENT-PAGE** instead of **local-link** and defined it properly **style.css**

Also, I found a very similar javascript online too which seems to do the same function as you wrong just worded differently. I played with both as I couldn’t get either of them to work which tells me the problem is me. Here is that function…

```auto
var currentPage = location.href;
var allA = document.getElementsByTagName('A');
for(var i = 0, len = allA.length; i < len; i++) {
    if(allA[i].href == currentPage) {
         allA[i].className = "AG-CURRENT-PAGE";
    }
}

```

The javascript would not add the **AG-CURRENT-PAGE** class to the current URL on my page. I think I know why… my URLs use a javascript function to create delay between going to that URL and the link. Here is how it looks like

```auto
<a href="javascript:delay('about.html')" class="AG-PAGE-MENU-LINK">ABOUT</a>

```

I suspect to get both yours Javascripts working I have to adjust the line with **if(links[i].href.startsWith(page\_url)) {** to something that encorporates the delay such as **javascript:delay(’** + **page\_url** + **')**

I am not to familiar with Javascript so having a hard time how to format this

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [June 5, 2022, 1:08am UTC](https://forum.pinegrow.com/t/how-to-change-styling-of-a-link-which-is-leads-to-the-page-that-is-currently-open/6553/5 "2022-06-05T01:08:04Z")

</div>

@pgrowbig yes, your hunch is correct. But there are other issues with this code and situations where it might not work. This issue is beyond the scope of helping users to use Pinegrow, so I’m unable to get further into it. You could ask for help on StackOverflow or a similar site.