CSS pseudo class to display background color - html

Question

I have three html pages that can be visited through tags that are on the navbar
So, there is not a main layout that shares the same navbar. Each page has its own HTML5 but they share the same CSS file
When a certain page is getting visited, its page on the navbar has a class "active " (See below)
navbar at the index.html
<nav>
Home
Teams
History
USA Ultimate
</nav>
navbar at the team.html
<nav>
Home
Teams
History
USA Ultimate
</nav>
and so on for the history page
Each tag has been given CSS rules to be displayed like a button. (no bootstrap used)
What I tried to do is whenever I am on a certain page I want the tag to have a white background color. In order for the visitor to know which page is currently open.
Finally I have configured it with the following CSS rule
Solution
.active{
background-color: #FFFFFF;
}
Initially i tried to do it by using pseudo-class
1)
nav a:active{
background-color: #FFFFFF;
}
2)
nav a:active:before{
background-color: #FFFFFF;
}
3)
nav a:active:after{
background-color: #FFFFFF;
}
Also used :target pseudo class but did not work.
For those that marked 1, 2, 3 and did not work, i tried it as I read the documentation and having seen a proposed solution on fiddle.
Can someone tell me what is the difference between the solution that worked and the others that I tried allong with :target and did not work?

Answer 1

As long as you have three pages that each one has its own HTML code, the way you solved it is one that you could do it, elsewhere in order to use :target you had to move as follow
Specify on each <a> an id and that id to be lace also at the end of the href.
See bellow
<div class="side_col">
<a href="#sl1">
<div id="sl1" class="side_link">Accounts
</div>
</a>
<a href="#sl2">
<div id="sl2" class="side_link">Newsletter
</div>
</a>
<a href="#sl3">
<div id="sl3" class="side_link">Operator
</div>
</a>
<a href="#l4">
<a href="#sl4">
<div id="sl4" class="side_link">Invoice
</div>
</a>
</a>
And the CSS
#sl1:target:before, #sl2:target:before, #sl3:target:before, #sl4:target:before { background-color: #24BDE9; }

Answer 2

The :active pseudo-class is only applied to an element while it is considered to be active: for an anchor, that is typically for the time from when you click your mouse button on it until you release your mouse button. That is not a particularly long time!
Taking a look at your example, it would work like this:
User begins clicking the Home link. Their mouse button depresses, and that link becomes :active. Your CSS using the :active pseudo-class in a rule applies to it.
The user releases the mouse button. That link is no longer :active and your CSS using the pseudo-class stops applying.
Page navigation happens. That link that was :active certainly isn't any more! This is when your class would take over and you achieve that effect that you want.
:active has a very short duration tied literally to the element being interacted with by the user: they are making it :active by clicking on it and not releasing their mouse button. In your case, that interaction is brief and will not carry over during page navigation.
This is why using a class works: that class is there when the page loads, will always stay there (unless you change it programmatically), and gives you a way to apply your CSS like you want.
EDIT to answer a question on :target below.
:target matches an element by ID to the URL fragment. In your example, you aren't using IDs, nor are you using URL fragments, so there is nothing that would be considered a :target.
:target could work with a structure like this below, but it's going a long way to solve a problem best solved by classNames:
<nav>
Home
Teams
<a href="history.html#history" id="history>History</a>
</nav>
In the example above, each link has a fragment and an element with the ID matching the fragment (#home and the first nav item's ID, for example). In that case, you would have an element that would be considered a :target.

Answer 3

You used nav a:active{..., but active is the class, so your selector has to be nav a.active{... instead. (dot, not colon)

Answer 4

nav a.active { ... }
The only difference is saying a.active instead of a:active due to the fact that .active is a class. You can check out this w3schools link: (scroll down a bit to where it says "Active/Current Navigation Link")
Hopefully this helped!