Change link color of the current page with CSS

How does one style links for the current page differently from others? I would like to swap the colors of the text and background.

HTML:

<ul id="navigation">
    <li class="a"><a href="/">Home</a></li>
    <li class="b"><a href="theatre.php">Theatre</a></li>
    <li class="c"><a href="programming.php">Programming</a></li> 
</ul>

CSS:

li a{
    color:#A60500;
}

li a:hover{
    color:#640200;
    background-color:#000000;
}

Solution 1:

With jQuery you could use the .each function to iterate through the links with the following code:

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

Depending on your page structure and used links, you may have to narrow down the selection of links like:

$("nav [href]").each ...

If you are using URL parameters, it may be necessary to strip these:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

This way you don't have to edit each page.

Solution 2:

a:active : when you click on the link and hold it (active!).
a:visited : when the link has already been visited.

If you want the link corresponding to the current page to be highlighted, you can define some specific style to the link -

.currentLink {
   color: #640200;
   background-color: #000000;
}

Add this new class only to the corresponding li (link), either on server-side or on client-side (using JavaScript).

Solution 3:

It is possible to achieve this without having to modify each page individually (adding a 'current' class to a specific link), but still without JS or a server-side script. This uses the :target pseudo selector, which relies on #someid appearing in the addressbar.

<!DOCTYPE>
<html>
<head>
    <title>Some Title</title>
<style>
:target {
    background-color: yellow;
}
</style>
</head>
<body>
<ul>
    <li><a id="news" href="news.html#news">News</a></li>
    <li><a id="games" href="games.html#games">Games</a></li>
    <li><a id="science" href="science.html#science">Science</a></li>
</ul>
<h1>Stuff about science</h1>
<p>lorem ipsum blah blah</p>
</body>
</html>

There are a couple of restrictions:

If the page wasn't navigated to using one of these links it won't be coloured;
The ids need to occur at the top of the page otherwise the page will jump down a bit when visited.

As long as any links to these pages include the id, and the navbar is at the top, it shouldn't be a problem.

Other in-page links (bookmarks) will also cause the colour to be lost.

Solution 4:

JavaScript will get the job done.

Get all links in the document and compare their reference URLs to the document's URL. If there is a match, add a class to that link.

JavaScript

<script>
    currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]')
    currentLinks.forE‌ach(function(link) {
        link.className += ' current-link')
    });
</script>

One Liner Version of Above

document.querySelectorAll('a[href="'+document.URL+'"]').forE‌ach(function(elem){e‌lem.className += ' current-link')});

CSS

.current-link {
    color:#baada7;
}

Other Notes

Taraman's jQuery answer above only searches on [href] which will return link tags and tags other than a which rely on the href attribute. Searching on a[href='*https://urlofcurrentpage.com*'] captures only those links which meets the criteria and therefore runs faster.

In addtion, if you don't need to rely on the jQuery library, a vanilla JavaScript solution is definitely the way to go.

Solution 5:

a:link -> It defines the style for unvisited links.

a:hover -> It defines the style for hovered links.

A link is hovered when the mouse moves over it.