Select last <li> who has not specific class

user_11361951 0
Viewed 82

I would like to successfully select the last li of the nav element that does not have the class ".mobile_hidden"

I have try this but it's remove all the img in all li

#main_menu ul.menu:last-child > li ul:last-child li:not(li.mobile_hidden) td.menu_td_picture {
       display: none;
}

In the code below i would like to select the "Fichier" and not "administration" menu.

#main_menu ul.menu:last-child > li ul:last-child li:not(li.mobile_hidden) td.menu_td_picture {
       display: none;
    }
    /* #main_menu ul > li:nth-last-child(:not(.mobile_hidden)) li td.menu_td_picture {
        display: none;
    } */
    

    /* .menu li:hover .menu-hover {
        right: 0;
    } */
<div id="main-menu">
  <nav>
    <ul class="menu">
      <li></li>
      <li></li>
      <li>I would like to select him</li>
      <li class="mobile_hidden"></li>
      <li class="mobile_hidden"></li>
      <li class="mobile_hidden"></li>
      <li class="mobile_hidden"></li>
      <li class="mobile_hidden"></li>
    </ul>
  </nav>
</div>

nav css html jquery
1 Answers

You can use the :not pseudo class https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Combinated with the sibling selector https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

#main-menu li:not(li:first-of-type) ~ li:not(.mobile_hidden){
   color: green;outline: 2px solid red;
}
<div id="main-menu">
  <nav>
    <ul class="menu">
      <li>item</li>
      <li>item</li>
      <li>I would like to select him</li>
      <li class="mobile_hidden">hidden</li>
      <li class="mobile_hidden">hidden</li>
      <li class="mobile_hidden">hidden</li>
      <li class="mobile_hidden">hidden</li>
      <li class="mobile_hidden">hidden</li>
    </ul>
  </nav>
</div>

user_90151910
Related