CODEWITHSUNDEEP
jquerycss
qinHaiXiang
qinHaiXiang

Reputation: 6419

How to add css style to the all children of element at the same time?

Such as:

<div class="mostOut">
    <div class="a">
        <h3 class="b"></h3>
        <div class="d"></div>
    </div>
</div>

And how can I apply css style to the children of "moustOut" at the same time.E.g:

with one click event.the css('opacity',1) could apply to the "a","b","d" at the same time.Or ,exclude "b" .

Upvotes: 9

Views: 20152

Answers (4)

JohnB
JohnB

Reputation: 18962

Have you considered using a 100% CSS method?

As Nick Craver pointed out: "Children can't have a greater opacity then their parent, why not set the opacity only on the .mostOut element?"

HTML

<div class="mostOut">
  div class mostOut
  <div class="a">
    div class a
    <h3 class="b">h3 class b</h3>
    <div class="d">div class d</div>
  </div>
</div>

CSS

.mostOut{
  opacity:0.5;
}
.mostOut:active{
  opacity:1;
}

Or, use the CSS Child Selector (same HTML as above):

CSS

.mostOut:active > div{
  border:solid 1px gray;
  opacity:0.5;
}

Upvotes: 2

Bj&#246;rn
Bj&#246;rn

Reputation: 13207

a little less code

$('.mostOut').click(function()
{
   $(this).children("*").css('opacity', 1);
});

and exclude ".b"

$('.mostOut').click(function()
{
   $(this).children("*").not(".b").css('opacity', 1);
});

or alternatively if its not the opacity causing the hidden/none

$('.mostOut').click(function()
{
   $(this).children("*").show();
});

Upvotes: 10

maletor
maletor

Reputation: 7122

You can use rgba to set opacity per element. Check out http://www.css3.info/preview/rgba/

Upvotes: 1

Blender
Blender

Reputation: 298056

This might be a dirty solution, but it should work:

$('.mostOut').click(function()
{
  $(this).find('*').each(function()
  {
    $(this).css('opacity', 1);
  });
});

For excluding all but the b element, try this:

$('.mostOut').click(function()
{
  $(this).find('*').not('.b').each(function()
  {
    $(this).css('opacity', 1);
  });
});

Play with the code, as I just typed this off of the top of my head, so I'm not guaranteeing that it will work.

Good luck!

Upvotes: 2

Related Questions