How can I style a link based on my current page? - html

Question

I made a navigation bar on top of the screen. If I'm on a specific page, let's say "Contact", I want the word be highlighted. If I switch to "Home", the word "Home" is highlighted, and so on. I am only allowed to use CSS and HTML.
body {
background: black;
}
nav {
padding:0;
right:1vw;
margin: 0 0 0px 0;
position: fixed;
top: 0vh;
text-align:center;
background-color:rgba(255, 255, 255, 0.4);
width:98%;
-moz-border-radius: 15px;
border-radius: 15px;
}
nav li {
top:2vh;
font-family:Verdana, Geneva, sans-serif;
font-size: 13pt;
display: inline-block;
margin-left:2vw;
margin-right:2vw;
margin-bottom:2vh;
margin-top:2vh;
}
nav li a {
white-space: nowrap;
display: block;
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(71, 80, 23, 0.3);
color: #fff;
padding: 0;
letter-spacing: 1px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
text-align:center;
}
nav:hover li a {
}
nav li a:hover {
background: transparent;
text-shadow: 0px 0px 20px #cc9900;
color: #ffff99;
}
<nav>
<li>Home</li>
<li>De dump</li>
<li>Opdrachten</li>
<li>Groepsopdracht</li>
<li>Over mij</li>
<li>Contact</li>
</nav>

Answer 1

Use following code .
Change it accordingly
a:link, a:visited {
display: block;
width: 175px;
font-weight: bold;
color: #FFFFFF;
background-color: #00BFFF;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #0066FF;
}

Answer 2

You can add a class for the <li>, say for eg <li class="active">Home</li> if you are in the home page.
Similarly, if you are in De Dump page, then the <li> should be like
<li class="active">De dump</li>
After you do this, you can just style the class in CSS like
.active{
color:red;
}

Answer 3

you can simply style the relevant list item on each of your pages, for example on the page "Opdrachten" just style the corresponding list item by default:
nav li:nth-child(3) a{
background:yellow;
box-shadow:0 0 4px red;
border-radius:4px;
}
<nav>
<li>Home</li>
<li>De dump</li>
<li>Opdrachten</li>
<li>Groepsopdracht</li>
<li>Over mij</li>
<li>Contact</li>
</nav>

Answer 4

CSS
nav ul li {
background-color: #000000;
}
#page1 ul li.page1 {
background-color: #FFFFFF;
}
#page2 ul li.page2 {
background-color: #FFFFFF;
}
#page3 ul li.page3 {
background-color: #FFFFFF;
}
Page 1 HTML
<nav id="page1">
<ul>
<li class="page1">Page 1</li>
<li class="page2">Page 2</li>
<li class="page3">Page 3</li>
</ul>
</nav>
Page 2 HTML
<nav id="page2">
<ul>
<li class="page1">Page 1</li>
<li class="page2">Page 2</li>
<li class="page3">Page 3</li>
</ul>
</nav>
Change nav id to = page3 for page 3