ネストされたクラスの最初のインスタンスをターゲットにする方法は？

Question

".container"クラスの最初のインスタンスをネストされた繰り返しブロックからのみターゲットにしようとしています。ここではわかりやすくするための構造は次のとおりです。

<div id="home-event-block> 
    <div class="event_container"> 
    <div>Some Text </div> 
    <div class="container">More Text </div> <!-- Target this only --> 
    </div> 
    <div class="event_container"> 
    <div>Some Text </div> 
    <div class="container">More Text </div> 
    </div> 
    <div class="event_container"> 
    <div>Some Text </div> 
    <div class="container">More Text </div> 
    </div> 
</div> 

私は明らかに「コンテナ」のすべてのインスタンスをターゲットにすることができますが、私はページ上の「コンテナ」の最初のインスタンスのみを取得するために途方に暮れています。思考？

Answer 1

あなたはあなたのCSSルールでは、より具体的になりたい場合は、あなたの親home-event-blockをターゲットと子セレクタを使用することができますcontainer

.event_container:first-of-type .container { 
 
    color: red 
 
}

<div id="home-event-block"> 
 
    <div class="event_container"> 
 
    <div>Some Text </div> 
 
    <div class="container">More Text </div> 
 
    <!-- Target this only --> 
 
    </div> 
 
    <div class="event_container"> 
 
    <div>Some Text </div> 
 
    <div class="container">More Text </div> 
 
    </div> 
 
    <div class="event_container"> 
 
    <div>Some Text </div> 
 
    <div class="container">More Text </div> 
 
    </div> 
 
</div>

を選択し.event_containerをターゲットに:first-of-type/first-childを使用することができます>

#home-event-block>.event_container:first-of-type>.container { 
 
    color: red; 
 
}

<div id="home-event-block"> 
 
    <div class="event_container"> 
 
    <div>Some Text </div> 
 
    <div class="container">More Text </div> 
 
    <!-- Target this only --> 
 
    </div> 
 
    <div class="event_container"> 
 
    <div>Some Text </div> 
 
    <div class="container">More Text </div> 
 
    </div> 
 
    <div class="event_container"> 
 
    <div>Some Text </div> 
 
    <div class="container">More Text </div> 
 
    </div> 
 
</div>

注：

• あなたが欠落していたすべての兄弟が、そうでない場合は、同じ要素divあなたことができませんでし

Answer 2

あるので、あなたが:first-of-typeを使用することができます"

home-event-block後片道は#home-event-block > div.event_container:first-of-type > div.container

です

#home-event-block>div.event_container:first-of-type>div.container { 
 
    color: red; 
 
}

<div id="home-event-block"> 
 
    <div class="event_container"> 
 
    <div>Some Text </div> 
 
    <div class="container">More Text </div> 
 
    <!-- Target this only --> 
 
    </div> 
 
    <div class="event_container"> 
 
    <div>Some Text </div> 
 
    <div class="container">More Text </div> 
 
    </div> 
 
    <div class="event_container"> 
 
    <div>Some Text </div> 
 
    <div class="container">More Text </div> 
 
    </div> 
 
</div>

これはに壊れる：

• #home-event-block（ID home-event-blockを持つ要素を選択します）
• > div.event_container:first-of-typeは、（それがクラスevent_containerを持っている場合にのみ、最初のdivの子を選択します）
• > div.container（divをクラスで選択してください）