I've hit a wall on this issue and can't seem to find a solution. I styled a few links using classes, but it seems that only the first link is accepting the :hover and :visited state styling. I made sure to use classes to style all of them. Not sure where the problem lies.
Here's the code snippet:
<div class="container">
<div class="row">
<div class="col-md-6 push-md-3 max-auto main animsition">
<h3 class="text-center">Contact <span class="dev">Me</span></h3>
<p class="contactLinks"><a href="mailto:#"><i class="fa fa-envelope" aria-hidden="true"></i> - Email me</a></p>
<p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i> - Facebook</a></p>
<p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i> - Twitter</a></p>
<p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i> - LinkedIn</a></p>
</div>
</div>
</div>
CSS:
.main > h3 {
padding-bottom: 30px;
}
.contactLinks a {
font-size: 150%;
color: #262626;
}
.contactLinks a:hover {
color: #6E8A71;
text-decoration: none;
}
.contactLinks a:visited {
color: #262626;
text-decoration: none;
}