jquery - 他のすべての親の子を選択する

Question

次のような HTML テンプレートがあります。

<div id = "container">

   <div class = "status">
      <div class ="dynamic"></div>
   </div>

   <div class = "status">
      <div class ="dynamic"></div>
   </div>

   <div class = "status">
      <div class ="dynamic"></div>
   </div>

   <div class = "status">
      <div class ="dynamic"></div>
   </div>

</div>

CSSまたはjQueryを使用して、他.statusのすべての背景を変更する方法はありますか?.dynamic

Answer 1

純粋な CSS でこれを行うことができます。

#container > .status:nth-child(2n+1) > .dynamic {
    /* Change the background */
}

（これがデモです！）

Answer 2

これは、CSS を介して行うことができます。

#container > .status:nth-child(2n) > .dynamic { background: whatever-you-want; }

また

#container > .status:nth-child(2n+1) > .dynamic { background: whatever-you-want; }

Answer 3

試す

$('.status:odd .dynamic').css('color', 'blue')

また

$('.dynamic:even').css('color', 'blue')

デモ:フィドル