Unable to successfully implement the CSS not selector

Question

Unable to successfully implement the CSS not selector

My webpage's code was created through the use of 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>

In an attempt to hide all elements except those with .page-item-2, I implemented the following CSS:

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

This solution effectively hides unwanted elements, but I also wish to exclude .page-item-46 from the selector. My modified CSS rule looks like:

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

Unfortunately, this adjustment does not produce the desired outcome.

html css css-selectors

Answer 1

Answer №1

When dealing with the element .page-item-46, it's important to note that it is not a descendant. As a result, you must remove the space between the :not pseudo classes:

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

Check out an example here

To illustrate this concept further, consider the following:

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

In this case, using the following selector would exclude elements with classes .one and .two: (example)

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

The following approach does not achieve the desired outcome: (example)

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

Similarly, this method also falls short: (example)

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

Lastly, an ineffective approach selects all elements because both selectors are not exclusive. (example)

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

Answer 2

When dealing with the element .page-item-46, it's important to note that it is not a descendant. As a result, you must remove the space between the :not pseudo classes:

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

Check out an example here

To illustrate this concept further, consider the following:

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

In this case, using the following selector would exclude elements with classes .one and .two: (example)

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

The following approach does not achieve the desired outcome: (example)

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

Similarly, this method also falls short: (example)

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

Lastly, an ineffective approach selects all elements because both selectors are not exclusive. (example)

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

Answer 3

Answer №2

Even though you have received a solution, it's worth noting that if compatibility with older browsers is important to you, you can achieve the desired outcome by implementing the following code:

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

Even though you have received a solution, it's worth noting that if compatibility with older browsers is important to you, you can achieve the desired outcome by implementing the following code:

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

Answer №3

apply the following CSS code

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

Answer 6

apply the following CSS code

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

Unable to successfully implement the CSS not selector

Answer №1

Answer №2

Answer №3

Similar questions

Looking for a way to locate an element in an ajax pop-up window using

Discovering hidden files within appsettings.json in ASP.NET Core 6 using Program.cs

Stylish CSS round link positioned on a half-circle

Arranging several lists in columns with a customized header title

Hovering over the <li> element reveals that it does not have an appropriate size

Is there a way to automatically adjust the size of an input field after dynamic spans have been

Blur transition on CSS-defined borders

Customizing a material-ui theme with withStyles() in conjunction with withTheme()

The collapsible menu in Bootstrap features a two-row design

Vibrant progress bar design with CSS

Utilizing React for incorporating HTML5 canvas gradients

Preventing conflicts while toggling visibility with JQuery across various groups

Loading content onto a webpage using AJAX

Reading Properties in VueJS with Firebase

Creating an Event on ASP.NET Websites

How to make your divs stand out using Bootstrap

Guide to turning off the Facebook iframe page plugin

Updating the Hero Image

Error: The context parameter should be in the form of a dictionary, not a set

Is there a way for me to choose the nearest input value when clicking on a href