CODEWITHSUNDEEP
htmlcss
Johanna
Johanna

Reputation: 147

How to target the first instance of a nested class?

I am trying to target the first instance of the class ".container" only from a nested repeating block. Here is the structure for clarity:

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

I can obviously target every instance of "container" but I am at a loss for getting only the first instance of "container" on the page. Thoughts?

Upvotes: 0

Views: 498

Answers (2)

dippas
dippas

Reputation: 60563

You can use :first-of-type/first-child to target .event_container then select 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>

If you want to be more specific in your CSS rule you can target your parent home-event-block and use the the child selector > 

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

Notes:

  • you were missing a " after home-event-block
  • you can use :first-of-type because every sibling is the same element div otherwise you couldn't

Upvotes: 2

j08691
j08691

Reputation: 207900

One way is #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>

This breaks down to:

  • #home-event-block (Select the element with the ID home-event-block)
  • > div.event_container:first-of-type (Select the first div child only if it has the class event_container)
  • > div.container (Select the div with the class container)

Upvotes: 0

Related Questions