Selecting first instance of an element with css

Question

I have some markup that looks like this:

<section id="accreditation">
  <div class="container">
    <div class="row"></div>
    <div class="row-accreditation">
      <div class="col-md-4">
        <img>
      </div>
      <div class="row"></div>
    <div class="row-accreditation">
      <div class="col-md-4">
        <img>
      </div>
    </div>
  </div>
</section>

How can I select the img in the first .row-accreditation div? I've tried using first-of-type and first-child selectors but both do the same thing which is selecting both of the images. I also tried to recreate the accepted answer from this thread like so...

#accreditation div.row accreditation > img ~ img {blah}

...but without success.

Is this possible with css, and if so what is the best way to do it?

Johannes · Accepted Answer · 2016-09-15 23:33:16Z

1

It does work this way in your particular example:

.row-accreditation:nth-child(2) > div > img { 
  ...
}

http://codepen.io/anon/pen/wzWwxK

But I don't know if the HTML structure will stay the same in your application.

answered Sep 15, 2016 at 23:33

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Selecting first instance of an element with css

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related