CODEWITHSUNDEEP
jqueryhtmlcss
H. Pauwelyn
H. Pauwelyn

Reputation: 14310

Select section except a div child

I've made a click event on the section.artist-info, but the problem is I won't have that click event on the .core-info. So I've write this CSS selector .artist-info:not(.core-info) for select the element I need and don't need. But it didn't work. So my question is now how can I select the section.artist-info except the child div.core-info? Here is my code:

$("body").on("click", ".artist-info:not(.core-info)", function() {
    if (!$(this).hasClass("preview-lied")) {
        alert("clicked");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <section class="artist-info"> <!-- I'll select this -->
        <div class="toggle-panel"> <!-- I'll select this inclusieve the child -->
            <p>&#9776;</p>
        </div>
        <div class="core-info">  <!-- I won't select this inclusieve the child tags -->
            <h1 class="titel">artist</h1>
            <p class="bold">Top nummers</p>
            <ul class="top-nummers">
                <li>number 1</li>
                <li>number 2</li>
                <li>number 3</li>
            </ul>
        </div>
    </section>
</body>

Upvotes: 0

Views: 55

Answers (2)

Narek-T
Narek-T

Reputation: 1928

Read carefully about :not. Your code should be

$("body").on("click", ".artist-info div:not(.core-info)", function() {
    if (!$(this).hasClass("preview-lied")) {
        alert("clicked");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <section class="artist-info">
        <div class="toggle-panel">
            <p>&#9776;</p>
        </div>
        <div class="core-info">
            <h1 class="titel">artist</h1>
            <p class="bold">Top nummers</p>
            <ul class="top-nummers">
                <li>number 1</li>
                <li>number 2</li>
                <li>number 3</li>
            </ul>
        </div>
    </section>
</body>

When you write .artist-info:not(.core-info) the browser trying to find section with class .artist-info without class .core-info. But when you add .artist-info div:not(.core-info) browser looking for div which is into .artist-info and with class .core-info

Upvotes: 2

Nenad Vracar
Nenad Vracar

Reputation: 122077

You just need to add > to .artist-info:not(.core-info)

$("body").on("click", ".artist-info:not(> .core-info)", function() {
    if (!$(this).hasClass("preview-lied")) {
        alert("clicked");
    }
});
.artist-info {
 background: gray;
}

.core-info {
  background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="artist-info">
        <div class="toggle-panel"><p>&#9776;</p></div>
        <p class="fa fa-pause fa-2x big-play"></p>
        <div class="core-info">
            <h1 class="titel"></h1>
            <p class="bold">Top nummers</p>
            <ul class="top-nummers">
                <li>number 1</li>
                <li>number 2</li>
                <li>number 3</li>
            </ul>
        </div>
    </section>

Upvotes: 1

Related Questions