直下の要素をセレクタで指定する場合で他の並列要素が入り込んでしまっている場合

Question

下記のようなコードにおいて、<span>要素が間に入り込んでいなければ、.wrapperを起点にして相対的に.wrapper > div:nth-child(1) > div:nth-child(1) {color:red}
によってhereを赤色にすることができました。
ここで、<span>が入ってしまっているような場合、.wrapperから.hereまで相対的にどのようにセレクタを指定してあげてば良いのかわからず、ご教示いただければ幸いです。
宜しくお願い申し上げます。

<div class="wrapper">
　<span>余計</span>
  <div>
    <div class="here">here</div>
  </div>
  <div>
    <div></div>
  </div>
</div>

.wrapper > div:nth-child(1) > div:nth-child(1) {color:red}

Comments

[maisumakun]

なぜ「相対的に」指定する必要があるのでしょうか。周囲の要素の有無に影響されて、不安定になりがちです。

Answer 1

.wrapper > div:nth-of-type(1) > div:nth-child(1) {color:red}

Comments

[pegy]

of-typeのような指定もできるのですね！便利なので覚えます。
ありがとうございます！

Answer 2

こういうことでしょうか？

.wrapper > div:nth-child(2) > div:nth-child(1) {color:red}

Comments

[pegy]

ありがとうございます。
> div:nth-child(n)
としていすると直下のdiv要素のうちn番目の意味かと勘違いしておりました。すべての要素を含んだカウントなのですね。勉強になりました。
ありがとうございます！