How to hide menu element with only CSS
I have these menu elements I am trying to hide but I cannot seem to only select the middle option called 'Contact'. I cannot edit the html directly so am using CSS to override the style.
Essentially I just want to hide the item called 'Contact' from appearing. How do I select it using CSS? I have put what I thought might work in the section, but it's not really working. Any help would be greatly appreciated. Thanks in advance. (Here it is as well: https://jsfiddle.net/amhzv0Lw/4/)
Here's the menu code:
<!DOCTYPE html>
<html>
<head>
<style>
.nav a[title:contact] {
display: none;
}
</style>
</head>
<body>
<ul class="nav navbar-nav navbar-left">
<li><a href="/www.example.com/" title="Home">Home</a></li>
<li><a href="/www.example.com/storepage.aspx" title="Contact">Contact</a></li>
<li><a href="https://www.example.com/login" title="Login">Login</a></li>
</ul>
</body>
</html>
Answer
You only have to replace : with =, because that's how css selectors work (reference here)
Your code should look like this
<style>
.nav a[title=Contact] {
display: none;
}
</style>