CSS not selector not working

My HTML is generated by wordpress.

<div class="header-main">
  <h1 class="site-title: "CSS not selector not working">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 ones 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;
}

That doesn’t work though.


solution

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

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

EXAMPLE HERE


For a more basic example, consider the following:

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

Using the following would exclude .one/.two from the selection: (example)

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

The following doesn’t: (example)

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

Neither does this: (example)

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

This doesn’t work either because it essentially selects all elements because both selectors are not mutually exclusive. (example)

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