Maarten Wolfsen Maarten Wolfsen - 3 months ago 8
CSS Question

CSS :not() not working properly

So I have a code structure like this:



.header-container a:not(.header-menu-right a) {
display: none;
}

<div class="header-container">
<div class="header-menu-right">
<ul>
<li><a href="#">link</a></li>
<!-- unimportant links -->
<li><a href="#">link</a></li>
<!-- unimportant links -->
</ul>
</div>
<a href="#">link</a>
<!-- important link -->
</div>





As you can see by the notes, I only want CSS to change the last a-tag.

What am I doing wrong here?

Answer

Try this and there you go:

.header-container > a {
    display:none;
}

Thanks!