CSS not selector not working

Question

My HTML is generated by wordpress.

<div class="header-main"> <h1 class="site-title"><a href="http://wp-themes.com/" rel="home">Theme Preview</a></h1> <div class="search-toggle active"> <a href="#search-container" class="screen-reader-text">Search</a> </div> <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation"> <h1 class="menu-toggle">Primary Menu</h1> <a class="screen-reader-text skip-link" href="#content">Skip to content</a> <div class="nav-menu"><ul><li class="page_item page-item-2"><a href="http://wp-themes.com/?page_id=2">About</a></li><li class="page_item page-item-46 page_item_has_children"><a href="http://wp-themes.com/?page_id=46">Parent Page</a><ul class="children"><li class="page_item page-item-49"><a href="http://wp-themes.com/?page_id=49">Sub-page</a></li></ul></li></ul></div> </nav> </div> 

I want to hide all elements, but with .page-item-2 , so I use:

 .header-main .nav-menu li:not(.page-item-2) { display:none; } 

This works, but I also want to exclude .page-item-46 from the selector:

 .header-main .nav-menu li:not(.page-item-2) :not(.page-item-46) { display:none; } 

This does not work.

Answer 1

The .page-item-46 element is not a descendant, so you must remove the space between :not pseudo-classes:

 .header-main .nav-menu li:not(.page-item-2) :not(.page-item-46) { /* remove this ^ */ display:none; } 

EXAMPLE HERE

---

For a simpler example, consider the following:

 <ul> <li class="one">one..</li> <li class="two">two</li> <li class="three">three</li> </ul> 

Using the following excludes from .one / .two : (example)

 ul li:not(.one):not(.two) { color:red; } 

---

Following is an example

 ul li:not(.one) :not(.two) { color:red; } 

---

Also this: (example)

 ul li:not(.one,.two) { color:red; } 

---

This does not work either because it essentially selects all the elements, because both selectors are not mutually exclusive. (example)

 ul li:not(.one), ul li:not(.two) { color:red; } 

Answer 2

Although you got your answer, you just said that you can also do this if you like older browsers:

 .header-main .nav-menu li.page-item-2, .header-main .nav-menu li.page-item-46 { display: list-item; } .header-main .nav-menu li { display: none; } 

Answer 3

use this CSS

 .header-main .nav-menu li:not(.page-item-2),.header-main .nav-menu li:not(.page-item-46) { display:none; }