Apply css to all but one element with Jquery

135
May 03, 2018, at 11:19 AM

I want to make the background of my mobile navigation to be opacity 0.5

I am using this:

$('body:not(#navigation-mobile)').css({opacity: '0.5'});

However, the whole body turns to that opacity when i want all but the #navigation-mobile to.

Answer 1

Opacity effects all children of the applied element. To get around it, set your background as its own element with no children and apply opacity to only the background. You will likely have to use something like this on the background container:

 position: fixed; top:0; left:0; z-index:1; width:100vw; height:100vh;

The content container will then sit on top by also giving it:

 position: fixed; top:0; left:0; z-index:10;

You can then apply opacity to your background without impacting the content. Do not apply the background to the body. Make a separate div and apply it to that div.

Answer 2

There's no way to give you a specific solution without a sample of your HTML, but the comments are correct that applying opacity to the body will affect everything that lives inside it.

Assuming your structure is similar to the following:

<body>
  <header></header>
  <nav id="navigation-mobile"></nav>
  <main></main>
  <footer></footer>
</body>

you can do something like:

$('body > *:not(#navigation-mobile)').css({'opacity': 0.5 })

You'll need to adjust the selector depending on your markup, but the general idea is that you use the :not() selector to apply the opacity to your mobile navigation's siblings, which will then apply the opacity to their children. If, for example, you have a container wrapping all of your content, you can replace body in the selector with your container class/ID.

If you edit your question with relevant HTML I can edit my answer to be more specific.

Answer 3

There is no way to remove the opacity for a child-element [1]

So what if you instead make the rest of the page, except for the navigational bar, to one element.

Like this:

<body>
  <div id="navigation-mobile">
    <ul class="inline-list">
      <li><a href="#">link1</a></li>
      <li><a href="#">link2</a></li>
      <li><a href="#">link3</a></li>
    </ul>
  </div>
  <div id="body">
    <div id="header">blabla</div>
    <div id="content">blabla</div>
    <div id="footer">blabla</div>
  </div>
</body>

In this way you can only use this jquery code:

$('#body').css({opacity: '0.5'});

And the navigational bar will remain it's full opacity.

READ ALSO
Center content based on max-width of it&#39;s children?

Center content based on max-width of it's children?

I'm not sure this is possible to do with CSS, but I want to double checkI have a responsive table that can have anywhere from 3 to 10 columns

111
Bootstrap navigation sticky stays on top of page

Bootstrap navigation sticky stays on top of page

I have a problem with Bootstrap navigation barI'm using sticky mode, as described in documentation:

167
How to make figcaption go directly under an image when float:left

How to make figcaption go directly under an image when float:left

I have an image as a hyperlink, and have used float:leftWhen I try to use a figcaption, it doesn't position where I want

126