My code includes all four basic pseudo-classes, and they all seem to be working fine except for the :visited pseudo-class. The color property doesn't function properly, and the background property appears to be inactive. I'm not sure what the issue might be. I don't think it's due to its placement in relation to other pseudo-classes.
https://i.sstatic.net/TClOv.jpg
.navBar-Container {
background-color: #fff;
padding: 2px 0px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
.navBar-Container .schoolBatch {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
.navBar-Container .schoolLogo {
width: 80px;
height: 60px;
}
.navBar-Container .schoolTitle {
margin-left: 15px;
align-items: center;
justify-content: center;
}
.navBar-Container .schoolName {
font-size: 1.3em;
font-family: "Hemi Head", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
text-align: center;
color: navy;
}
.navBar-Container .schoolMotto {
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: italic;
font-size: 0.9em;
text-align: center;
font-weight: 500;
}
.navBar-Container ul {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
list-style-type: none;
padding: 0 0;
}
.navBar-Container ul>li a:link {
color: navy;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
}
.navBar-Container ul>li a:visited {
color: red;
background-color: chartreuse;
}
.navBar-Container ul>li a:hover {
color: white;
background-color: navy;
}
.navBar-Container ul>li a:active {
color: purple;
background-color: green;
}<div class="navBar-Container">
<div class="schoolBatch col-4">
<div class="schoolLogo-Container"><img src="https://via.placeholder.com/80x60" class="schoolLogo" alt="BGS Logo" /></div>
<div class="schoolTitle">
<div class="schoolName">BETHEL GEMINI SCHOOLS</div>
<p class="schoolMotto">Heaven's Light, Our Ground</p>
</div>
</div>
<nav class="navBar col-8">
<ul class="navBar-Items">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="admissions.html">Admissions</a></li>
<li><a href="academics.html">Academics</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="contactus.html">Contact Us</a></li>
<li><a href="login.html">Log In</a></li>
</ul>
</nav>
</div>