Wie richtet man die erste Instanz einer geschachtelten Klasse ein?

Question

Ich versuche, die erste Instanz der Klasse ".container" nur aus einem verschachtelten sich wiederholenden Block anzusprechen. Hier ist die Struktur für Klarheit:

<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> 

Ich kann natürlich jede Instanz von „Containern“ Ziel, aber ich bin an einem Verlust für immer nur die erste Instanz von „Containern“ auf der Seite. Gedanken?

Answer 1

Sie :first-of-type/first-child.event_container Ziel verwenden können, dann 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>

wählen Wenn Sie in Ihrem CSS-Regel um genauer sein möchten, können Sie Ihre Eltern home-event-block und benutzen Sie das Kind Selektor Ziel >

#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>

Hinweise:

• Sie fehlten eine " nach home-event-block
• Sie :first-of-type verwenden können, weil jedes Geschwister das gleiche Element ist div sonst konnte man nicht

Answer 2

Ein Weg ist #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>

Diese gliedern sich an:

• #home-event-block (Wählen Sie das Element mit der ID home-event-block)
• > div.event_container:first-of-type (Wählen Sie das erste div Kind nur, wenn sie die Klasse hat event_container)
• > div.container (Wählen Sie das Div mit der Klasse container)