0

I don't know if that is even possible…

I have a div#branding inside of my header. The header has multiple other elements inside. I want all children of my header to have a opacity of 0.3 but NOT the #branding div.

How can I achieve that?

I tried with the following piece, but that doesn't work.

$('header div:not(#branding)').css('opacity', '0.3');

Thank you for your help.

matt
  • 42,713
  • 103
  • 264
  • 397
  • 1
    As you can tell by the different and conflicting answers, folks are confused about what you're asking. Please include some representative HTML to remove the confusion. In particular, folks need to know if you're trying to set opacity on all children but one or whether it includes the parent. – jfriend00 Aug 10 '11 at 21:20
  • the title of this question is the exact opposite of what you're describing in your text. Please change the title, because this is a much more complicated issue and i got here by searching for an answer to it. – ProblemsOfSumit Jul 22 '13 at 15:25

4 Answers4

3

Try this:

$('div#header').children().css('opacity', '0.3');

It selects all children of div#header and applies the opacity to them only. ( http://api.jquery.com/children/ )

Demo: http://jsfiddle.net/MNUsL/1/

js-coder
  • 8,134
  • 9
  • 42
  • 59
1

it should, try:

$('header div').not('#branding').css('opacity', '0.3');

edit

As for inheriting opacity - children cannot be less opaque than parent, but could be more

http://jsfiddle.net/Jacek_FH/MNUsL/12/

Jacek Kaniuk
  • 5,229
  • 26
  • 28
  • You are right. Actually you are able to set the opacity value but, as the parent is basicly hidden, it won't be visible. – js-coder Aug 10 '11 at 21:27
  • @Jacek_FH: +1 but you should update your fiddle to include a branding div - http://jsfiddle.net/WTjmH/ – NakedBrunch Aug 10 '11 at 21:45
0

It is not possible at all. You will have to have the opacity for each child element which you want. Try this

$('headerSelector').children(":not(#branding)").css('opacity', '0.3');
ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • @dotweb have you tried it out? If you set `opacity` on a parent element, all child elements will inherit that as the "base" opacity. You can't make a child element more opaque than its parent. – Pekka Aug 10 '11 at 21:11
  • It does. Look at my comment at my post. – js-coder Aug 10 '11 at 21:14
  • @pekka - but it's not neccesary that they are on different levels. you just have to exclude #branding – Jacek Kaniuk Aug 10 '11 at 21:15
  • @Jacek yeah, I totally overlooked that. Removed my -1s and going to bed for today :) – Pekka Aug 10 '11 at 21:17
  • 2
    Folks - Read my answer first before down voting, I said we can apply the opacity to the child elements individually and it is not possible if we set it to the parent and child having a different opacity. – ShankarSangoli Aug 10 '11 at 21:25
  • Well you could have been more constructive, presenting an alternative adding some extra comments. The tooltip text of the downvote buttons states: '_This answer is not useful_' so the downvoters (not me) might have a point... – Veger Aug 10 '11 at 22:10
0

whenever i have this issue I just do it as simple as possible for me, maybe not the most elegant solution but i just create a wrapper div i.e:

<div id="headerWrapper">
   <div id="header">...</div>
   <div id="branding"></div>
</div>

Then it's just a question of positioning the branding on top with the css "position:relative" and "z-index" properties. It will no longer be a child of the header but it is inside the wrapper so if you want to listen to specific events it's still possible.

I hope this helps.

Daniel Figueroa
  • 10,348
  • 5
  • 44
  • 66