Adding a CSS ID for links

• 

  bhamberg · Member · Oct 9, 2017 at 7:59 pm

  • Copy link
  • Add topic to favorites

  Help the noob, please!

  Have a few colored sections to a wordpress site. I’ve changed my global hyperlink colors to match that of the site but one of the sections is the new link color and they do not show up.

  I created an ID (#noorange) and applie it just to that section; which works but every link in every section after that is changed too.

  Here is the code – where did I screw up?

  #noorange

  a:link {
  color: #FFFFFF ;}

  a:visited {
  color: #FFFFFF ;}

  :hover {
  color: #9155A1 ;
  text-decoration: underline;
  }

  a:focus {
  color: #9155A1 ;
  }
  a:active {
  color: #FFFFFF ;
  }

• 

  achyuthajoy · Member · Oct 10, 2017 at 1:42 am

  • Copy link

  Hi,
  First of all, ID can be used once per page. It is a unique identifier of the element.

  To fix your problem, change the id to class. Add the class noorange to the elements you wish to modify and add the following css.

  .noorange a:link {
      color: #FFFFFF;
  }
  .noorange a:visited {
      color: #FFFFFF;
  }
  .noorange a:hover {
      color: #9155A1;
      text-decoration: underline;
  }
  .noorange a:focus {
      color:  #9155A1;
  }
  .noorange a:active {
      color:  #FFFFFF;
  }

  This should fix your problem.
  Good day!

• 

  bhamberg · Member · Oct 10, 2017 at 11:32 am

  • Copy link

  Thanks achyuthajoy!

  Know the basics but my syntax sucks! Here is how I fixed it…

  #noorange a, #noorange a:link,#noorange a:visited,#noorange a:hover,#noorange a:active {
  color: #FFFFFF ;
  }
  
  #noorange a:hover {
  color: #9155A1 ;
  text-decoration: underline;
  }
  #noorange a:focus {
  color: #9155A1 ;
  }

• 

  idryan97 · Member · Oct 10, 2017 at 11:38 am

  • Copy link

  @bhamberg You’re welcome.
  Thought you were updating the css of theme. That’s why i split the code.

  Good day!