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   HTML    lt ul id  navigation  gt       lt li class  a  gt  lt a href     gt Home lt  a gt  lt  li gt       lt li class  b  gt  lt a href  theatre php  gt Theatre lt  a gt  lt  li gt       lt li class  c  gt  lt a href  programming php  gt Programming lt  a gt  lt  li gt    lt  ul gt    CSS   li a      color  A60500     li a hover      color  640200      background-color  000000

User · Answer

Use single class name something like class="active" and add it only to current page instead of all pages. If you are at Home something like below:

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

and your CSS like

li.active{
color: #640200;
}

User · Answer

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    lt  DOCTYPE gt   lt html gt   lt head gt       lt title gt Some Title lt  title gt   lt style gt   target       background-color  yellow     lt  style gt   lt  head gt   lt body gt   lt ul gt       lt li gt  lt a id  news  href  news html news  gt News lt  a gt  lt  li gt       lt li gt  lt a id  games  href  games html games  gt Games lt  a gt  lt  li gt       lt li gt  lt a id  science  href  science html science  gt Science lt  a gt  lt  li gt   lt  ul gt   lt h1 gt Stuff about science lt  h1 gt   lt p gt lorem ipsum blah blah lt  p gt   lt  body gt   lt  html gt    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

User · Answer

lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 0 Transitional  EN  gt   lt html gt  lt head gt    lt style type  text css  gt  lt  --   class1 A link  text-decoration  none  background  1C1C1C url      images menu-bg jpg  center top no-repeat  border-left  4px solid  333333  border-right  4px solid  333333  border-top  3px solid  333333   border-bottom  4px solid  333333     class1 A visited  text-decoration  none  background  1C1C1C url      images menu-bg jpg  center top no-repeat  border-left  4px solid  333333  border-right  4px solid  333333  border-top  3px solid  333333   border-bottom  4px solid  333333     class1 A hover  text-decoration  none  background  1C1C1C url      images menu-bg jpg  center top no-repeat  border-left  3px solid  0000FF  border-right  3px solid  0000FF  border-top  2px solid  0000FF   border-bottom  2px solid  0000FF     class1 A active  text-decoration  none  background  1C1C1C url      images menu-bg jpg  center top no-repeat  border-left  3px solid  0000FF  border-right  3px solid  0000FF  border-top  2px solid  0000FF   border-bottom  2px solid  0000FF     nav menu  current  text-decoration  none  background  1C1C1C url      images menu-bg jpg  center top no-repeat  border-left  3px solid  FF0000  border-right  3px solid  FF0000  border-top  2px solid  FF0000   border-bottom  2px solid  FF0000     a link  text-decoration none    a visited  text-decoration none    a hover  text-decoration none    a active  text-decoration none    -- gt  lt  style gt    lt  head gt    lt body style  background  000000 url        images bg jpg   repeat-y top center fixed  width  100   align  center  gt    lt table style  table-layout fixed  border 0px  width 100  height 100  border 0 cellspacing 0 cellpadding 0 align center gt  lt tr gt    lt td style  background  url       images menu bg-menu jpg  center no-repeat    border 0px  width  100   height  100   align  center  valign  middle  gt    lt span class  class1  id  nav menu  gt    lt a href  http   Yourhomepage-url com      class  current     target   parent  gt  lt font face  Georgia  color   0000FF  size  2  gt  lt b gt  amp nbsp  amp nbsp Home amp nbsp  amp nbsp  lt  b gt  lt  font gt  lt  a gt    amp nbsp  amp nbsp    lt a href  http   Yourhomepage-url com yourfaqspage-url php or  html  target   parent  gt  lt font face  Georgia  color   0000FF  size  2  gt  lt b gt  amp nbsp  amp nbsp FAQs page amp nbsp  amp nbsp  lt  b gt  lt  font gt  lt  a gt    amp nbsp  amp nbsp    lt a href  http   Yourhomepage-url com youraboutpage-url php or  html  target   parent  gt  lt font face  Georgia  color   0000FF  size  2  gt  lt b gt  amp nbsp  amp nbsp About amp nbsp  amp nbsp  lt  b gt  lt  font gt  lt  a gt    amp nbsp  amp nbsp    lt a href  http   Yourhomepage-url com yourcontactpage-url php or  html  target   parent  gt  lt font face  Georgia  color   0000FF  size  2  gt  lt b gt  amp nbsp  amp nbsp Contact amp nbsp  amp nbsp  lt  b gt  lt  font gt  lt  a gt   lt  span gt    lt  td gt  lt  tr gt  lt  table gt  lt  body gt  lt  html gt    Note  the style goes in between the head tag   lt head gt        lt  head gt   and the class  class1  and the id  nav menu  goes in the  ie   --  lt span class  class1  id  nav menu  gt  --    Then the last class attribute  class  current   goes in the hyper-link code of the link in the page that you want the active current link to correspond to   Example  You want the link tab to stay active or highlighted when it s correspondent page is whats currently in view  go to that page itself and place the class  current  attribute by it s link s html code  Only in the page that corresponds to the link so that when ever that page is at view  the tab will stay highlighted or stand out different from the rest of the tabs   For the Home page  go to the home page and place the class in it  example   lt a href  http   Yourhomepage-url com   class  current  target   parent  gt   For the About page  go to the about page and place the class in it  example   lt a href  http   Yourhomepage-url com youraboutpage-url php or  html  class  current  target   parent  gt   For the Contact page  go to the contact page and place the class in it  example   lt a href  http   Yourhomepage-url com youraboutpage-url php or  html  class  current  target   parent  gt   etc         Notice the example Table above - Lets assume this was the Home page  so on this page  only the Home url link section has the class  current   Sorry for any meaning-less error  am not a prof  but this worked for me and displays fine in almost all the browsers tested  including ipad  and smart phones  Hope this will help some-one out here because is very frustrating to want to and not able to  I had tried so had to get to this  and so far it s good for me

User · Answer

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

User · Answer

include this  on your page where you want to change the colors save as  php    lt  php include  includes navbar php      gt    then add a new file in an includes folder   includes navbar php   lt div  lt  php   Using REQUEST URI   currentpage     SERVER  REQUEST URI     if preg match   index i    currentpage     currentpage            echo   class   navbarorange  the css class for your nav div        elseif preg match   about  or second page name   i    currentpage       echo   class   navbarpink      elseif preg match   contact   or edit 3rd page name   i    currentpage       echo   class   navbargreen       gt   gt   lt  div gt

User · Answer

Best and easiest solution    For each page you want your respective link to change color to until switched  put an internal style in EACH PAGE for the VISITED attribute and make each an individual class in order to differentiate between links so you don t apply the feature to all accidentally  We ll use white as an example    lt style type  text css  gt   link1 a visited  color  FFFFFF text-decoration none     lt  style gt    For all other attributes such as LINK  ACTIVE and HOVER  you can keep those in your style css  You ll want to include a VISITED there as well for the color you want the link to turn back to when you click a different link

User · 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

User · Answer

So for example if you are trying to change the text of the anchor on the current page that you are on only using CSS  then here is a simple solution  I want to change the anchor text colour on my software page to light blue   lt div class  quot navbar quot  gt       lt ul gt          lt a href  quot    index html quot  gt  lt li gt Home lt  li gt  lt  a gt          lt a href  quot usefulsites html quot  gt  lt li gt Useful Sites lt  li gt  lt  a gt          lt a href  quot software html quot  gt  lt li class  quot currentpage quot  gt Software lt  li gt  lt  a gt          lt a href  quot workbench html quot  gt  lt li gt The Workbench lt  li gt  lt  a gt          lt a href  quot contact php quot  gt  lt li gt Contact lt  a gt  lt  li gt  lt  a gt       lt  ul gt   lt  div gt   And before anyone says that I got the  lt li gt  tags and the  lt a gt  tags mixed up  this is what makes it work as you are applying the value to the text itself only when you are on that page   Unfortunately  if you are using PHP to input header tags  then this will not work for obvious reasons  Then I put this in my style css  with all my pages using the same style sheet   currentpage           color  lightblue

User · Answer

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

User · Answer

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   lt script gt      currentLinks   document querySelectorAll  a href    document URL           currentLinks forE  ach function link            link className      current-link            lt  script gt    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

User · Answer

N 1 1 s answer is correct  In addition  I ve written a small JavaScript function to extract the current link from a list  which will save you the trouble of modifying each page to know its current link    lt script type  text javascript  gt   function getCurrentLinkFrom links        var curPage   document URL      curPage   curPage substr curPage lastIndexOf              links each function            var linkPage     this  attr  href            linkPage   linkPage substr linkPage lastIndexOf                if  curPage    linkPage               return   this                           document  ready function        var currentLink   getCurrentLinkFrom    navbar a         currentLink addClass  current link          lt  script gt

User · Answer

You do not need jQuery just to do this  All you need is a tiny and very light vanilla Javascript and a css class  as in all the answers above      First define a CSS class in your stylesheet called current  Second add the following pure JavaScript either in your existing JavaScript file or in a separate js script file  but add script tage link to it in the head of the pages  or event just add it in a script tag just before the closing body tag  it will still work in all these cases          function highlightCurrent              const curPage   document URL           const links   document getElementsByTagName  a             for  let link of links               if  link href    curPage                 link classList add  current                                              document onreadystatechange                    if  document readyState      complete                highlightCurrent                           The  href  attribute of current link should be the absolute path as given by document URL  console log it to make sure it is the same

User · Answer

Presto Thanks  Yours worked perfectly for me  but I came up with a simpler version to save changing everything around   Add a  lt span gt  tag around the desired link text  specifying class within   e g  home tag    lt nav id  top-menu  gt       lt ul gt           lt li gt   lt a href  home html  gt  lt span class  currentLink  gt Home lt  span gt  lt  a gt   lt  li gt           lt li gt   lt a href  about html  gt About lt  a gt   lt  li gt           lt li gt   lt a href  cv html  gt CV lt  a gt   lt  li gt           lt li gt   lt a href  photos html  gt Photos lt  a gt   lt  li gt           lt li gt   lt a href  archive html  gt Archive lt  a gt   lt  li gt           lt li gt   lt a href  contact html  gt Contact lt  a gt  lt  li gt       lt  ul gt   lt  nav gt    Then edit your CSS accordingly    currentLink       color  baada7

[javascript] Change link color of the current page with CSS

Examples related to javascript

Examples related to html

Examples related to css