jquery selector without button element

Question

All in the .page-wrapper should get the opacity class -- this works but the button should stay with opacity 1.

I tried this but it doesn't work (the button is inside the page-wrapper)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".page-wrapper:not('button')").toggleClass("opacity")
    });
});
</script>
<style>
.opacity
{
    opacity:0.4;
}
<button>Toggle class</button>

here is a fiddle http://jsfiddle.net/SY7Np/ display:none is better for my site instead of opacity:0.0

If you hide some element containing child elements, also the childs will be hidden.. — Hardy
– Hardy, Commented Jun 4, 2014 at 23:02
This is standard behavior of Opacity. It propagates down and apply the effect to everything inside. Use rgba() instead. — Nawed Khan
– Nawed Khan, Commented Jun 4, 2014 at 23:03
@NawedKhan means rgba() color for backround.. for example: background: rgba(0,0,0,0.5) will give you black background with 50% opacity. — Hardy
– Hardy, Commented Jun 4, 2014 at 23:03
but I want all with opacity not only the background-color how can I edit the button to opacity 1 — Tony Montana
– Tony Montana, Commented Jun 4, 2014 at 23:12

Victory · Accepted Answer · 2014-06-04 23:57:30Z

1

You almost had it you are either missing a space or an ' > '

$(document).ready(function () {
  $("button").click(function () {
     $(".page-wrapper > :not(button)").toggleClass("opacity")
 });
});

additionally you could do, depending on nesting:

     $(".page-wrapper :not(button)").toggleClass("opacity")

see fiddle

answered Jun 4, 2014 at 23:57

Victory

5,9113 gold badges28 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tony Montana Over a year ago

thx :-) I'm just curious what does the ">" before the :not... ?

Victory Over a year ago

The > means only first children, without it will select all children regardless of depth (children, grand-children, grand-grand-children...).

David Thomas · Accepted Answer · 2014-06-04 23:56:57Z

0

One approach would be:

.opacity,
.opacity :not(button) {
    color: rgba(0,0,0,0.2);
    background-color: rgba(255,255,255,0.2);
}

JS Fiddle demo.

References:

:not() pseudo-class.

answered Jun 4, 2014 at 23:56

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Collectives™ on Stack Overflow

jquery selector without button element

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related