Change link color of the current page with CSS

Question

How does one style links for the current page differently from others? I would like to swap the colors of the text and background. ``` li a { color: #A60500; } li a:hover { color: #640200; background-color: #000000; } ``` ``` ```

Accepted Answer

`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).

Change link color of the current page with CSS

Solution

Problem