How can I style a nav bar link as selected using CSS? - html

Question

I want to create a nav bar that uses anchor links (the nav bar is fixed and the user stays on one page). By default, I'd like to have the first link in the nav bar styled with a background highlight to indicate it has been selected. If the user clicks on a different link on the nav bar, I'd like that link to be given the selection styling instead.
Is there a pure HTML/CSS method to do this?
Edit: I am currently tinkering with turning the nav links into secret radio buttons. I'll report back if I get it to work.

Answer 1

You can use the :active Selector.
a:active {
background-color: yellow;
}
This style will be applied to the last element you clicked on... once you lose focus though, it will not retain the style.
It would be much better to just change the class via javascript if you can, in my opinion anyway.

Answer 2

CSS
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + a {
background: blue !important;
color: white !important;
}
HTML
<input type="radio" id="x" name="selectedLink" checked />
<a href="#associatedAnchor1" onclick="document.getElementById('x').checked = true">
This is a link that will apply 'selected' style to itself and
strip the 'selected style from all other links in its group
</a>
<input type="radio" id="y" name="selectedLink" />
<a href="#associatedAnchor2" onclick="document.getElementById('y').checked = true">
This is a link that will apply 'selected' style to itself and
strip the 'selected style from all other links in its group
</a> <!-- and so on -->
It uses a tiny amount of JavaScript, but it's the closest thing to an answer that probably exists. Hope it's useful to somebody! :)

Answer 3

You can use :target and style with that. It would look something like:
li {
display: inline-block;
float: left;
border: 1px solid white;
}
a {
color: white;
text-decoration: none;
padding: 15px;
background-color: #bada55;
}
#targetDiv {
width: 50px;
height: 50px;
background-color: #bada55;
float: right;
border: 1px solid white;
}
:target {
background-color: purple !important;
}
<ul>
<li>First
</li>
<li>Second
</li>
<li>Third
</li>
<li>Target
</li>
<li>Target Div<li>
</ul>
The fiddle.
Note
This will interfere with the browser history, so you may want to watch out for that. It could also create a "jump", but if it's a fixed navigation you may be fine. The fiddle has a e.preventDefault() on the links to prevent the jump, but I think you could be fine without it.
UPDATED
Added a fiddle and included targeting other divs as per the comment.