Question

I am using WordPress

I have put an extra container in the navigation menu. The navigation menu has the id #access, and the extra container has the id #language-selection . The #language-selection container uses <li> elements, but the hover and focus are overridden by the following:

#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
    background: #efefef;
}
#access li:hover > a,
#access a:focus {
    background: #f9f9f9; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    color: #373737;
}

How can i overwrite these rules, so that nothing happens on hover and on focus on the #language-selection container, when it is inside the #access container?

Following is the HTML:

<nav id="access" role="navigation">
  <h3 class="assistive-text">Main menu</h3>
  <div class="skip-link">
    <a class="assistive-text" href="#content" title="Skip to primary content">Skip to primary content</a>
  </div>
  <div class="skip-link">
    <a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a>
  </div>
  <div class="menu">
    <ul>
      <li class="page_item page-item-24 current_page_item">
        <a href="http://localhost/katarina/?lang=en">Home</a>
      </li>
      <li class="page_item page-item-26">
        <a href="http://localhost/katarina/?page_id=26&amp;lang=en">Contact</a>
      </li>
    </ul>
  </div>
  <div id="language-selection">
    <ul class="qtrans_language_chooser" id="qtranslate-chooser">
      <li class="lang-en active">
        <a href="http://localhost/katarina/?lang=en" hreflang="en" title="English" class="qtrans_flag qtrans_flag_en">
          <span style="display:none">English</span>
        </a>
      </li>
      <li class="lang-DK">
        <a href="http://localhost/katarina/?lang=DK" hreflang="DK" title="Dansk" class="qtrans_flag qtrans_flag_DK">
          <span style="display:none">Dansk</span>
        </a>
      </li>
      <li class="lang-fa">
        <a href="http://localhost/katarina/?lang=fa" hreflang="fa" title="Farsi" class="qtrans_flag qtrans_flag_fa">
          <span style="display:none">Farsi</span>
        </a>
      </li>
      <li class="lang-ar">
        <a href="http://localhost/katarina/?lang=ar" hreflang="ar" title="???????" class="qtrans_flag qtrans_flag_ar">
          <span style="display:none">???????</span>
        </a>
      </li>
    </ul>
    <div class="qtrans_widget_end"></div>
  </div>
</nav>

So basically i want hover and focus to remain the same on the “Home” and “Contact” links, but to be deactivated on every li element inside #language-selection

Answer 1

Since you’ve provided the HTML, it’s a little easier to see what you mean. My advice would be to add .menu as a specifier in the style so it only works within that container and doesn’t include #language-selection. So:

#access a:focus { ... }

Then becomes

#access .menu a:focus { ... }

Then it will only apply that style to the anchors found within the div.menu.

The key is to be as specific with your style as possible. Just be careful though, because the more you apply the higher the styles specificity goes up. Meaning:

<div id="foo">
  <div id="bar">
    <a class="baz">Hello, world!</a>
  </div>
</div>

Then apply:

#foo #bar a { color: red; } /* higher specificity */
#bar a.baz { color: green; }

The link will actually be red and not green.