要素のすべての子要素に同時にCSSスタイルを追加するにはどうすればよいですか？

Question

のような：

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

そして、どのように私は同じtime.Egで"moustOut"の子供たちにCSSスタイルを適用することができます。同時に"a","b","d"に適用できる1 click event .theのcss('opacity',1)で

。または、"b"を除外します。

Answer 1

これは汚い解決策になるかもしれませんが、それは動作するはずです：

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

すべてが、b要素を除くために、これを試してください：私はちょうど入力されたとして

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

は、コードと遊びますこれは私の頭の上から離れているので、私はそれがうまくいくことを保証していません。

幸運を祈る！

Answer 2

rgbaを使用すると、要素ごとに不透明度を設定できます。 http://www.css3.info/preview/rgba/

Answer 3

をチェックしてください少しのコード

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

とその不透明度が隠さ/なし

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

Answer 4

が生じないない場合

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

または代わりに ".B" 除外あなたは100％CSSメソッドの使用を検討しましたか？

ニックCraverが指摘したように：「のみ.mostOut要素に不透明度を設定していない、なぜ子どもたちはその後、彼らの親、をより高い不透明度を持つことができない？」

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; 
} 

• jsFiddle demo 1

あるいは、CSS子供セレクタを使用（上記と同じHTML）：

CSS

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

• jsFiddle demo 2