CSS for changing color of div containing the href

I'm trying to change the background color of the div containing the href. I'm trying to do this with a:target & a:visited property. This doesn't seem to work. I'm obviously not targetting the right thing.

I have the below nav structure.

    <nav id="main-nav">
        <a href="#" ><div></div></a>
        <a href="#"  id="p1" class="current"><div>OPTION - 1</div></a>
        <a href="#" id="p2"><div>OPTION - 2</div></a>
        <a href="#" id="p3"><div>OPTION - 3</div></a>
        <a href="#" id="p4"><div>OPTOIN - 4</div></a>
        <a href="#" id="p5"><div>OPTION - 5</div></a>       
    </nav>

Below is the CSS relevant to the above

#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; 
}

Is there a way I could achieve this please?

UPDATED

        <nav id="main-nav">
            <a href="#p0" ><div></div></a>
            <a href="#p1"  id="p1" class="current"><div>&nbsp DASHBOARD</div></a>
            <a href="#p2" id="p2"><div>OPTION - 1</div></a>
            <a href="#p3" id="p3"><div>OPTION - 2</div></a>
            <a href="#p4" id="p4"><div>OPTION - 3</div></a>
            <a href="#p5" id="p5"><div>OPTION - 4</div></a>     
        </nav>

:target div {
    background: yellow;
}

Answers 1

  • The easiest way would be to remove the div's since they are overwriting the markup you define on a:visited and a:hover. So if you are only changing the background color, since setting the background color of the div's parent 'a' will cover the background of the div.

    I assumed you wanted to highlight the nav item with the .current class set.

    .current{
      background-color: #FFFF00;
    }
     <nav id="main-nav">
       <a href="#" id="p0"></a>
       <a href="#" id="p1" class="current">&nbsp; DASHBOARD</a>
       <a href="#" id="p2">OPTION - 1</a>
       <a href="#" id="p3">OPTION - 2</a>
       <a href="#" id="p4">OPTION - 3</a>
       <a href="#" id="p5">OPTION - 4</a>
       </ul>
    </nav>


Related Articles