CSS:特定クラスの下の、特定のIDを取得するにはどうすればよいでしょうか

Question

特定クラスの下の、特定のIDを取得するにはどうすればよいでしょうか

JavaScriptのquerySelectorなどを使用して以下のクラス名の孫にある特定のIDの要素を取得したいのですが上手くいかず、、
・v-list-item--active クラスの下
・statusというIDをもっている
という条件で取得したいです。

以下試したこと

document.querySelector(".v-list-item--active #status")

結果null

<div tabindex="0"aria-expanded="true" role="button" class="v-list-group__header v-list-item v-list-item--active v-list-item--link theme--dark">
　<div class="v-list-item__icon v-list-group__header__prepend-icon">
　　<i aria-hidden="true" class="v-icon notranslate mdi mdi-calendar-month theme--dark"></i>
　</div>
　<div data-v-7ba5bd90="" class="v-list-item__content">
　　<div data-v-7ba5bd90="" id="schedule" class="v-list-item__title"> スケジュール </div>
　</div>
</div>

どのように取得するのが正しいのかご教示ください。

Answer 1

document.querySelector(".v-list-item--active #status")

　　<div data-v-7ba5bd90="" id="schedule" class="v-list-item__title">

#status ではなく #schedule なのでは。

あと、同じIDを持つ要素は文書中に複数あってはいけないわけですから、「特定クラスの下の」と限定する意味はなく、単に "#status" "#schedule" だけで指定できるはずです。もし文書中に同じIDを持つ要素が複数あるなら、それは欠陥なので直してください。

Answer 2

孫限定なら

window.addEventListener('DOMContentLoaded', ()=>{
  var node=document.querySelector(".v-list-item--active > * > #指定するID");
  console.log(node);
});

Comments

[riesa]

すみません、初歩的な解決策のご提示ありがとうございました。。。