jQuery: set opacity of entire element except on child?

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.

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/

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/

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.

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');