CODEWITHSUNDEEP
csscss-selectors
lisovaccaro
lisovaccaro

Reputation: 33996

CSS selector just for elements in submenu

I have this menu with a slide down submenu:

<ul class="sf-menu">
  <li class="menu-item current-menu-item">
    <a> whatever </a>
    <ul class="sub-menu">
      <li class="menu-item current-menu-item">
      <a> whatever </a>
      <li class="menu-item current-menu-item">
      <a> whatever </a>
    </ul>
  </li>
</ul>

Right now this is my CSS:

.sf-menu .current-menu-item a {
    background: blue url('images/diagonal.png') repeat;
}

This is changing all my menu items with class .current-menu-item, but I don't want to modify the ones inside the submenu.

How do I change the selector so it doesn't select LIs inside submenu? Or how do I make a selector to overwrite all LIs inside submenu with background:black?

I cannot modify the html, is it possible to do this?

Upvotes: 2

Views: 809

Answers (3)

BalusC
BalusC

Reputation: 1109272

Use the child selector parent > child.

.sf-menu > .current-menu-item > a {
    background: blue url('images/diagonal.png') repeat;
}

Upvotes: 3

James Khoury
James Khoury

Reputation: 22329

its actually quite simple:

.sf-menu .sub-menu  .current-menu-item a {
    background: black;
}

Or alternatively if you want to be more specific: 

.sf-menu .current-menu-item .sub-menu .current-menu-item a {
    background: black;
}

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34853

One way to do this is to overwrite the rule for the submenu items.

So

.sf-menu .current-menu-item .sub-menu li a {
    background: none;
}

Upvotes: 0

Related Questions