skip to Main Content

I used two :not selectors in Jquery as follows and when I use both it does not work?

//$("section:not('#contact')").css({border:"2px solid red"});
//$("section:not('#clients')").css({border:"2px solid red"});

It onl works with one not selector, anyone know why?

Here is the html

<!DOCTYPE html>
<html>
<head>
    <title>Green Design</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <header>
        <div class="wrapper">
            <h1 id="logo">Green Design</h1>
            <nav>
            <h2>Main Navigation</h2>
            <ul>
                <li><a href="">Home</a><span>/</span></li>
                <li><a href="">About</a><span>/</span></li>
                <li><a href="">Portfolio</a><span>/</span></li>
                <li><a href="">Clients</a><span>/</span></li>
                <li><a href="">Contact</a><span>/</span></li>
            </ul>
        </nav>
    </div>
</header>

<div id="lead-banner">
    <img src="images/banner.jpg" alt="lead banner">
    <div class="banner-overlay">
        <div class="wrapper">
            <div class="banner-title">We Know Web Design</div>
            <p>With over 15 years experience you can be sure your website is in safe hands</p>
            <a href="">View Our Work</a>
        </div>
    </div>
</div>

<div id="main-content">

    <div class="wrapper">
        <section id="points-of-sale">
            <h2>Points of Sale</h2>
            <ul>
                <li>
                    <img src="images/cs-1.png" alt="web design">
                    <h3>Web Design</h3>
                    <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
                </li>
                <li>
                    <img src="images/cs-2.png" alt="e-commerce">
                    <h3>E-commerce</h3>
                    <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
                </li>
                <li>
                    <img src="images/cs-3.png" alt="seo">
                    <h3>SEO</h3>
                    <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
                </li>
            </ul>
        </section>
        <section id="clients">
            <h2>What Our Clients Say</h2>
            <img src="images/head.png" alt="quote">
            <blockquote>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et l</blockquote>
        </section>
        <section id="contact">
            <ul id="contact-methods">
                <li>555 555 5555</li>
                <li>[email protected]</li>
                <li>
                    <span>Leaf Studios</span>
                    <span>Times Square</span>
                    <span>NY</span>
                </li>
            </ul>
            <img src="images/map.png" alt="map">
            <ul id="social-nav">
                <li class="facebook"><a href="">Facebook</a></li>
                <li class="twitter"><a href="">Twitter</a></li>
                <li class="pinterest"><a href="">Pinterest</a></li>
                <li class="linked-in"><a href="">Linked In</a></li>
            </ul>
        </section>
    </div>

</div>
<!-- this is how you use jquery in your html -->
<script src="scripts/jquery-3.3.1.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>

Does anyone know the solution to this? Can you use two :not selectors in Jquery and when I use two not selectors it doesnt :not select any of them? what is up with this?

2

Answers


  1. maybe line this:

    $('section').not('#contact').not('#clients').css({border:"2px solid red"});
    
    Login or Signup to reply.
  2. Try Both

    $('section:not(#contact,#clients)').css({border:"2px solid #000"});
    

    and

    $('section').not('#contact,#clients').css({border:"2px solid red"});
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search