Is there a way to change the color of section anchors in a fixed header when selected without using JavaScript? I'm looking for a CSS-only solution that will change the color of the selected anchor and revert it back to normal when another anchor is clicked. The site is all on one page, so it's not like navigating to a new page.
<header>
<ul>
<li><a href="#one">○</a></li>
<li><a href="#two">○</a></li>
<li><a href="#three">○</a></li>
<li><a href="#four">○</a></li>
<li><a href="#five">○</a></li>
</ul>
<header>
EDIT: Trying out a different method. I decided to experiment with the :focus feature of buttons instead.
Here's what I came up with:
HTML
<button href="one" class="circle">○</button>
<button href="two" class="circle">○</button>
<button href="three" class="circle">○</button>
<button href="four" class="circle">○</button>
CSS
.circle{
background-color: none;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
}
.circle:focus {
color: red;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
I attempted to use buttons as anchor tags, but it didn't work as expected.