css - 複数のサブコンテナの最初の子

Question

レイヤー 2 の div の最初の子であるかどうかに関係なく、レイヤー 1 に関連する最初、2 番目、3 番目のスパンを選択するにはどうすればよいですか?

<div class="LAYER1">
  <div class="LAYER2">
    <span>FIRST<span>
  </div>
  <div class="LAYER2">
    <span>SECOND</span>
    <span>THIRD</span>
  </div>
</div>

span:first-childを使用すると、FIRST と SECOND を取得できますが、FIRST を取得したいだけです。

編集:「LAYER1 から 1 番目、2 番目、3 番目のスパンの子を取得する」のような選択を行うことを目指しています。SECOND と THIRD も最初の LAYER2 div にある可能性があり、ソリューションはそれに依存するべきではありません。

EDIT2: http://jsfiddle.net/3hAEc/3/の例

Answer 1

選択は<span>FIRST</span>このようにのみ機能します（ブラウザがサポートしていると仮定します）

.LAYER1 .LAYER2:first-child span { 
    // ...
}

ここでわかるように: http://jsfiddle.net/3hAEc/

Answer 2

それらにIDまたはクラスを追加してから、そのように選択するのはどうですか?

<div class="LAYER1">
  <div class="LAYER2">
    <span id="first_span">FIRST<span>
  </div>
  <div class="LAYER2">
    <span id="second_span">SECOND</span>
    <span id="third_span">THIRD</span>
  </div>
</div>

Answer 3

これを試して ：

.LAYER1 .LAYER2:first-child span:first-child /* first one*/
.LAYER1 .LAYER2+.LAYER2 span:first-child /* second one*/
.LAYER1 .LAYER2+.LAYER2 span:first-child+span /* third one*/

ただし、これは現在の DOM にのみ適用されます。

Answer 4

最後に、jQuery を利用して次の JS ソリューションを使用しました。

// for the first span, use 0 and increase for further children
$(".LAYER1").find("span").eq(0);