Change Link Color of the Current Page With Css

Change link color of the current page with CSS

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

How To Change Color of Current Page Link - HTML / CSS / JavaScript

SOLUTION

For example, the store page:

HTML:

<li><a class="active" href="/store.html">Store</a></li>

CSS: (.navbar-default .navbar-nav > li > a was overriding the .active class, as mentioned by doutriforce)

.navbar-default .navbar-nav > li > a.active {
color: #337ab7;
}

.navbar-button:hover, a.active {
color: #337ab7;
transition: ease-in-out 0.3s;
}

JavaScript:

// current page highlight

   // link color code starts
    $(document).ready(function () {
        console.log("current page", window.location.href);
        $("[href]").each(function () {
            $('a[href]:not([href=#])').each(function () {

                if (window.location.href.indexOf($(this).attr('href')) > -1) {
                    console.log($(this).attr('href') +" is active ");
                    $(this).addClass('active');
                }
                else {
                    console.log($(this).attr('href') + "is not active ");
                }
            });
        });
    });
    // link color code ends

Then be sure to change which <a> link gets the active class based on which page is the active page in your file - i.e. if you're editing login.html, then your HTML will look like this:

<li><a href="/store.html">Store</a></li>
<li><a href="/blog.php">Blog</a></li>
<li><a class="active" href="/login.html">Login</a></li>

If you're editing blog.php, then your HTML will look like this:

<li><a href="/store.html">Store</a></li>
<li><a class="active" href="/blog.php">Blog</a></li>
<li><a href="/login.html">Login</a></li>

And so on.

Finally, in index.html (the home page), be sure to add a span with class sr-only after the link text, like this:

<li><a href="http://nowordpress.gatewaywebdesign.com/index.html">
Home <span class="sr-only">(current)</span></a></li>

To hide the (current) label with Bootstrap.

how do u change the link color of one specific link in wordpress?

You can write an inline CSS.

<a style="color: #FF00CC" href="http://www.google.com">test</a>

CSS Changing the color of a selected link using classes

Hi what you are doing is somehow wrong. As you are using class="nav" for both the links and the list items. That's pretty wrong, you should be using class names other then that are already in use. Use something like this:

<li class="nav_li">
   <a class="nav_link" href="index.html" target="_self">
      <img class="nav_image" src="images/logo_sm.png" width="100" height="50" alt="Welcom to Comp Sale " />
   </a>
</li>

Just to differentiate them, this way it would be easy to set the styles for them.

However you can use this too: li.nav a.nav ul.nav img.nav. And now the main thing about your code is that you are not specifying what properties should be for the image link. Try this for that:

a.nav img {
/* all the properties for that! */
}

This will try to set the properties for the image. You can use background-color: #hexcode or color: #hexcode;.

But still the best method would be to use different classnames.

And the

$(window).focus(function() { // jQuery

Would do the job for you. Set the CSS properties in this function.

change color current link page angular & css

Here's what I suggest, in addition to changing your CSS IDs to classes (and probably eliminating the IDs from your a tags). You may also find that you don't need as much code by using ng-class; it will apply the class when the boolean statement after the colon is true. In this case, we're using your jsonerator $scope variables.

<li><a href="#" ng-click = "person()" id="bl" ng-class="{bl: jsonerator}">Person</a></li>
<li><a href="#" ng-click = "product()" id="or" ng-class="{or: jsonerator2}">Product</a></li>
<li><a href="#" ng-click = "place()" id="gr" ng-class="{gr: jsonerator3}">Place</a></li>

How to change the color of an active link?

You can use :focus pseudo-class.

The :focus CSS pseudo-class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

a:focus {  color: red;}

<ul>  <li> <a href="#"> dog </a> </li>  <li> <a href="#"> cat </a> </li></ul>

<!DOCTYPE html>  
<head>
    <title>css link test</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
   This is a test.<br />
   <a href="page1.html" class="active_page">page 1</a>
   <a href="page2.html">page 2</a>
</body>
</html>

.active_page{
     color: rgb(0,128,0);
}