CODEWITHSUNDEEP
jqueryhtmlcsscss-selectors
Liam Smith
Liam Smith

Reputation: 39

Apply css to all but one element with Jquery

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.

Upvotes: 0

Views: 850

Answers (3)

OuuGiii
OuuGiii

Reputation: 1133

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.

Upvotes: 1

Adam Fratino
Adam Fratino

Reputation: 1241

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.

Upvotes: 1

Korgrue
Korgrue

Reputation: 3478

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.

Upvotes: 1

Related Questions