How can Display only current list item and hide others

Question

I have register a widget with coding below

//Add our Widget Locations
function ourWidgetsMenu() {
  register_sidebar(array(
    'name' => 'Menu for Courses',
    'id' => 'menuforcourses'
  ));
}
add_action('widgets_init', 'ourWidgetsMenu');

And added a category menu in it form WordPress admin and made it appear as coding below,

<div class="menuincoursepages">
  <?php dynamic_sidebar( 'menuforcourses' ); ?>
</div>

It's appearing on source code like below

 .menuincoursepages ul li { display: none; } .menuincoursepages .current-cat li { border: 1px solid green; padding: 10px; border-radius: 5px; display: block!important; } 

 <div class="menuincoursepages"> <li class="cat-item cat-item-3 current-cat"><a href="http://example.com/my-category/engineering/">Engineering</a> (11) <ul class='children'> <li class="cat-item cat-item-358"><a href="http://example.com/course-category/engineering/aerospace-engineering/" >Aerospace Engineering</a> (1)</li> <li class="cat-item cat-item-361"><a href="http://example.com/course-category/engineering/bioengineering/" >Bioengineering</a> (1)</li> <li class="cat-item cat-item-5"><a href="http://example.com/my-category/engineering/civil-engineering/">Civil Engineering</a> (11) </li> </ul> </li> <li class="cat-item cat-item-7"><a href="http://example.com/my-category/marketing/">Marketing</a> (1) <ul class='children'> <li class="cat-item cat-item-11"><a href="http://example.com/my-category/marketing/online-marketing/">Online Marketing</a> (1) </li> </ul> </li> </div> 

But the thing is, I want to display list items only with class current-cat and it's sub-items and want to hide all other items and sub-items.

Till here, it's done with the help of Buwan (Thanks a lot)

Now I got another issue with this,

When I click on 'Civil Engineering' then code change as below,

<div class="menuincoursepages">
  <li class="cat-item cat-item-3 current-cat-parent current-cat-ancestor"><a href="http://example.com/my-category/engineering/">Engineering</a> (11)
    <ul class='children'>
      <li class="cat-item cat-item-358"><a href="http://example.com/course-category/engineering/aerospace-engineering/" >Aerospace Engineering</a> (1)</li>
      <li class="cat-item cat-item-361"><a href="http://example.com/course-category/engineering/bioengineering/" >Bioengineering</a> (1)</li>
      <li class="cat-item cat-item-5 current-cat"><a href="http://example.com/my-category/engineering/civil-engineering/">Civil Engineering</a> (11)
      </li>

    </ul>
  </li>
  <li class="cat-item cat-item-7"><a href="http://example.com/my-category/marketing/">Marketing</a> (1)
    <ul class='children'>
      <li class="cat-item cat-item-11"><a href="http://example.com/my-category/marketing/online-marketing/">Online Marketing</a> (1)
      </li>
    </ul>
  </li>
</div>

and here I want to display all list-items which are under class 'current-cat-parent' and color red for class 'current-cat' which is for 'Civil Engineering' in this case

Let me know if this is also possible..

Thank you

Answer 1

Try to use :not() selector here...

 .menuincoursepages li:not(.current-cat) { display: none; } .menuincoursepages .current-cat li { border: 1px solid green; padding: 10px; border-radius: 5px; display: block; } 

 <div class="menuincoursepages"> <li class="cat-item cat-item-3 current-cat"><a href="http://example.com/my-category/engineering/">Engineering</a> (11) <ul class='children'> <li class="cat-item cat-item-5"><a href="http://example.com/my-category/engineering/civil-engineering/">Civil Engineering</a> (11) </li> </ul> </li> <li class="cat-item cat-item-7"><a href="http://example.com/my-category/marketing/">Marketing</a> (1) <ul class='children'> <li class="cat-item cat-item-11"><a href="http://example.com/my-category/marketing/online-marketing/">Online Marketing</a> (1) </li> </ul> </li> </div> 

Updated: You will need to change the css like below

 .menuincoursepages li { display: none; } .menuincoursepages li.current-cat, .menuincoursepages li.current-cat-parent, .menuincoursepages li.current-cat li, .menuincoursepages li.current-cat-parent li { display: block; } .menuincoursepages .current-cat li, .menuincoursepages .current-cat-parent li { border: 1px solid green; padding: 10px; border-radius: 5px; } .menuincoursepages li.current-cat { border-color: red; } 

 <div class="menuincoursepages"> <li class="cat-item cat-item-3 current-cat-parent current-cat-ancestor"><a href="http://example.com/my-category/engineering/">Engineering</a> (11) <ul class='children'> <li class="cat-item cat-item-358"><a href="http://example.com/course-category/engineering/aerospace-engineering/">Aerospace Engineering</a> (1)</li> <li class="cat-item cat-item-361"><a href="http://example.com/course-category/engineering/bioengineering/">Bioengineering</a> (1)</li> <li class="cat-item cat-item-5 current-cat"><a href="http://example.com/my-category/engineering/civil-engineering/">Civil Engineering</a> (11) </li> </ul> </li> <li class="cat-item cat-item-7"><a href="http://example.com/my-category/marketing/">Marketing</a> (1) <ul class='children'> <li class="cat-item cat-item-11"><a href="http://example.com/my-category/marketing/online-marketing/">Online Marketing</a> (1) </li> </ul> </li> </div>