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 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.

Josh Crozier · Accepted Answer · 2014-03-12T05:51:33.403

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;
}

Interesting, i see where i was wrong. I think this will work on my website. Let me test it — greg hampton, Mar 12 '14 at 05:41
If you use jQuery and are wondering why `:not(.one,.two)` doesn't work here, see http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css — BoltClock, Mar 12 '14 at 05:47

score 3 · Answer 2 · answered Mar 12 '14 at 05:48

3

Though you got your answer, just saying that you can also do like this if you care about 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;
}

answered Mar 12 '14 at 05:48

Mr_Green

40,727
45
159
271

Thanks. This is a great idea. can't believe i didn't think of it! – greg hampton Mar 12 '14 at 05:55

Harshit Tailor · Answer 3 · 2014-03-12T05:37:50.180

-1

use this CSS

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

edited Mar 12 '14 at 05:37

answered Mar 12 '14 at 05:20

Harshit Tailor

3,261
6
27
40

6

That hides each of them, because 2 is not 46, and 46 is not 2. See http://jsfiddle.net/barmar/B6mv4/2/ – Barmar Mar 12 '14 at 05:34

CSS not selector not working

3 Answers3