Select an element with same class 2 times

Question

I am working on a WordPress website and my menu is appearing as,

<li  class="current-menu-parent current-menu-item "><a  href="#">SHOP</a>
    <ul class="sub-menu">
        <li class="menu-item-517 current-menu-item"><a href="#">Engine1</a></li>
        <li class="current-menu-item menu-item-516 current-menu-item"><a href="#">Engine2</a></li>
        <li class="menu-item-517 current-menu-item"><a href="#">Engine3</a></li>    
    </ul>
</li>

Engine2 is my currently active page. the class current-menu-item is repeating 2 times in my active sub menu li. How can I select my currently active submenu li using css?

I have tried with

.current-menu-item.current-menu-item{
}

but not working.

Please help me.....

here is the link to my website. Please visit the drop-down menu under shop.

There's no difference between having `
` and `
`. Both are the same. If you have to differentiate between the above two, it can't be done. — Praveen Kumar Purushothaman, Dec 27 '16 at 21:37
What `.current-menu-item.current-menu-item` does is that it increments its specificity. — Ricky Ruiz, Dec 27 '16 at 21:38

score 0 · Accepted Answer · answered Dec 27 '16 at 21:48

0

How can I select my currently active submenu li using css?

Given your specific example; the element with the repeated class, has current-menu-item first, whereas the others do not. That being the case you can use "attribute begins with" operator: [attr^=value]. reference

[class^=current-menu-item]{
  background-color: yellow;
}

<li  class="current-menu-parent current-menu-item "><a  href="#">SHOP</a>
    <ul class="sub-menu">
        <li class="menu-item-517 current-menu-item"><a href="#">Engine1</a></li>
        <li class="current-menu-item menu-item-516 current-menu-item"><a href="#">Engine2</a></li>
        <li class="menu-item-517 current-menu-item"><a href="#">Engine3</a></li>    
    </ul>
</li>

This is very specific and prone to breaking if changes are made to your menu. The real fix would be to fix up the classes in your menu items.

answered Dec 27 '16 at 21:48

Dan

10,614
5
24
35

The problem here, will it select the spaces as well? What if the starting of class doesn't have it? – Praveen Kumar Purushothaman Dec 27 '16 at 21:48
What spaces do you mean? I did say it was very specific. It would work if every thing is juuust right – Dan Dec 27 '16 at 21:49
Never mind the spaces. What if the first class in the list is not that class? – Praveen Kumar Purushothaman Dec 27 '16 at 21:50
Not a robust solution in any way. I commented on that in the answer. – Dan Dec 27 '16 at 21:50
Yea, gotcha. Thanks. – Praveen Kumar Purushothaman Dec 27 '16 at 21:52
You may delete this answer, as this is a dupe... `:)` – Praveen Kumar Purushothaman Dec 27 '16 at 21:55

Select an element with same class 2 times

1 Answers1