title: CSS for changing color of div containing the href
body: <p>I'm trying to change the background color of the <code>div</code> containing the <code>href</code>. I'm trying to do this with <code>a:target</code> &amp; <code>a:visited</code> property. This doesn't seem to work. I'm obviously not targetting the right thing.</p>
  
  <p>I have the below <code>nav</code> structure.</p>
  
  <pre><code>    &lt;nav id="main-nav"&gt;
          &lt;a href="#" &gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;a href="#"  id="p1" class="current"&gt;&lt;div&gt;OPTION - 1&lt;/div&gt;&lt;/a&gt;
          &lt;a href="#" id="p2"&gt;&lt;div&gt;OPTION - 2&lt;/div&gt;&lt;/a&gt;
          &lt;a href="#" id="p3"&gt;&lt;div&gt;OPTION - 3&lt;/div&gt;&lt;/a&gt;
          &lt;a href="#" id="p4"&gt;&lt;div&gt;OPTOIN - 4&lt;/div&gt;&lt;/a&gt;
          &lt;a href="#" id="p5"&gt;&lt;div&gt;OPTION - 5&lt;/div&gt;&lt;/a&gt;       
      &lt;/nav&gt;
  </code></pre>
  
  <p>Below is the CSS relevant to the above</p>
  
  <pre><code>#main-nav {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -moz-box-orient: vertical;
      -moz-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      height: 100%;
      max-width: 300px;
      width: 100%;
      z-index: 5;
      top: 0;
      left: -300px; /* changed */
      position: fixed;
      background: #222;
      text-align: center; 
  }
  
  #main-nav a {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      color: white;
      border-bottom: 1px solid #555555;
      text-decoration: none;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -moz-box-orient: vertical;
      -moz-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      text-align: left;
      max-height: 100px;
  }
  
  
  #main-nav a:hover, #main-nav a.current {
      background: #3c3c3c; 
  }
  
  #main-nav a:target {
      background: yellow; 
  }
  </code></pre>
  
  <p>Is there a way I could achieve this please?</p>
  
  <p><strong>UPDATED</strong></p>
  
  <pre><code>        &lt;nav id="main-nav"&gt;
              &lt;a href="#p0" &gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#p1"  id="p1" class="current"&gt;&lt;div&gt;&amp;nbsp DASHBOARD&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#p2" id="p2"&gt;&lt;div&gt;OPTION - 1&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#p3" id="p3"&gt;&lt;div&gt;OPTION - 2&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#p4" id="p4"&gt;&lt;div&gt;OPTION - 3&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#p5" id="p5"&gt;&lt;div&gt;OPTION - 4&lt;/div&gt;&lt;/a&gt;     
          &lt;/nav&gt;
  
  :target div {
      background: yellow;
  }
  </code></pre>