Target a specific container to style on WordPress storefront theme

Question

I need assistance using the WordPress storefront theme/woocommerce via styling specific page children.

There are three categories in the navigation tab for someone to hover over where a dropdown list will occur for each tab with different pages/items related to the category being hovered over.

All the pages within each tab/category on the nav bar should have a different background.

Example: If I hover over a nav tab "shoes" a drop down list will show different several shoe brand: Nike, Adidas, Sketchers. All the pages that are on the Shoe tab should have the same background color of red.

Another nav tab might be Hats whereon after hovering a drop-down list of several hat brands show. All the pages in that hat tab should have the same background color of blue because it is of the hat tab.

I do not see any html tags in the DOM with specific classes to put css so all page elements will get the same effect.

Example:

.container .hats {
background: blue;
}

There are no elements where I can apply the styles to. if I just used .container, then all pages will get the same color.

Any help?

EDIT

**My bad, I was not specific in my question.. It is not changing the nav background colors ex: but when the user clicks on a specific brand "nike" under the main tab "shoes", the page that that gets loaded into the browser will display products of nike in a red background. **

Answer 1

If for example the shoe tab is second in the nav you could use

nav li:nth-child(2) {
}

For that and let's say hats are the fourth tab, you would use:

nav li:nth-child(4) {
}

This selects the 2nd and the 4th element that is li inside the nav:

<nav>
  <li></li>
  <li></li> <-this gets selected
  <li></li>
  <li> <-and this gets selected
    <ul>
      <li></li>
    </ul>
  </li>
</nav>