javascript - Jqueryでサブチャイルドではなくチャイルドのみをターゲットにする

Question

次のマークアップがある場合

<div class='parent'>
  <div class='first'>
    First Child
    <div class='second'>
  Sub-child
    </div>
  </div>
</div>

以下はJqueryです

$('.parent').children().css("color","#00b3ff");

その結果、(クラスではなく) 最初の子のみを選択したいので、両方の子の色が変わります。

Answer 1

このようなものはどうですか：

$('.parent').children().css('color', '#00b3ff').find('> div').css('color', 'black')

「>」を使用すると、ルールはすべての子ではなく直接の子にのみ適用されます (.children() を使用する場合)。

もう 1 つ必要なことは、子が親の色を継承しないようにすることです。これは、明示的に色を指定することで実行できます。

JSFIDDLEはこちら

Answer 2

誰も投稿しないので、CSS のみを使用します。

デモ

.parent > div{
    color:#00b3ff;
}
.parent div div {
    color:black;
}

Answer 3

    $(".parent > div:eq(0)").css("color","#00b3ff");
    $(".parent > div:first").css("color","#00b3ff");

Answer 4

$('.parent').next('div').css("color","#00b3ff");