title: CSS selectors on active elements by id
body: <p>I am working on a personal website using a template and have run into an issue with something I am trying to do. As it stands the following is working:</p>
  
  <pre><code>&lt;nav id="nav"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#top" id="top-link" class="skel-layers-ignoreHref"&gt;&lt;span class="icon fa-home"&gt;Introduction&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#about" id="about-link" class="skel-layers-ignoreHref"&gt;&lt;span class="icon fa-male"&gt;About Me&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#resume" id="resume-link" class="skel-layers-ignoreHref"&gt;&lt;span class="icon fa-star"&gt;Resumé&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#projects" id="resume-link" class="skel-layers-ignoreHref"&gt;&lt;span class="icon fa-heart"&gt;Current Projects&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#skills" id="skills-link" class="skel-layers-ignoreHref"&gt;&lt;span class="icon fa-th"&gt;Skills &amp; Hobbies&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#contact" id="contact-link" class="skel-layers-ignoreHref"&gt;&lt;span class="icon fa-paper-plane"&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>With the following css:</p>
  
  <pre><code>#nav ul li a.active span:before
  {
      color: green;
  }
  </code></pre>
  
  <p>However I would like to make it so that each  has a different colour when active. I am struggling with selecting the  in css by ID while also making sure it is active.</p>
  
  <p>i.e. about-link will be color: red when active, resume-link will be color: blue when active etc.</p>
  
  <p>Thanks in advance!</p>