I'm encountering an issue with CSS selectors while using Foundation 5: I am having trouble selecting the desired element, which seems strange to me.
The specific problem I am facing is related to changing the background-color of the "Right Button Active" element within a top-bar:
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">
<a href="#">Right Button Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><a href="#">Left Nav Button</a></li>
</ul>
</section>
</nav>
Within my css file, I have tried the following code:
.active a {
background-color: red;
}
Unfortunately, this code did not work as expected. I also attempted to use:
.top-bar-section ul.right li.active a
but it did not yield any results. The only selector that worked was:
.top-bar-section li.active:not(.has-form) a:not(.button)
However, I am struggling to comprehend why this particular selector works. Any assistance with CSS Selectors would be greatly appreciated. Thank you!